बाध्यकारी Knockoutjs

Question

का उपयोग कर दिनांक

मैं एक समस्या मिल गया है जब पाठ बॉक्स के लिए दिनांक मान बाध्यकारी नॉकआउट का उपयोग कर, के रूप में

जब पेज पहली बार के लिए भरी हुई है नीचे चित्र में देखा, मैं करने के लिए ajax का उपयोग कर रहा खाता स्टेटस डेटा प्राप्त करें।

public JsonResult GetAccountStatements(int id) 
{ 
    var accountStatementsVM = db.AccountStatements 
     .Where(a => a.CompanyID == id) 
     .Select(a => new AccountStatementViewModel 
     { 
      AccountStatementID = a.AccountStatementID, 
      CompanyID = a.CompanyID, 
      Description = a.Description, 
      Amount = a.Amount, 
      ReceiptDate = a.ReceiptDate, 
      Type = a.Type 
     }) 
     .ToList(); 

    return Json(accountStatementsVM, JsonRequestBehavior.AllowGet); 
} 

चींटी परिणाम है::

[{"AccountStatementID":2,"CompanyID":1,"Description":"test","Amount":1000,"ReceiptDate":"/Date(1447261200000)/","Type":"Payment"}] 

देखें में, मैं इसे इस कोड का उपयोग कर प्रदर्शित:

<tbody data-bind="foreach: AccountStatements, visible: AccountStatements().length > 0"> 
    <tr> 
     <td data-bind="attr: { id: AccountStatementID }"> 
      <a href="#" class="btn btn-primary btn-xs" data-bind="click: $root.edit"><i class="glyphicon glyphicon-pencil"></i></a> 
      <a href="#" class="btn btn-danger btn-xs" data-bind="click: $root.delete"><i class="glyphicon glyphicon-remove"></i></a> 
     </td> 
     <td data-bind="text: Description"></td> 
     <td data-bind="text: Amount"></td> 
     <td data-bind="date: ReceiptDate"></td> 
    </tr> 
</tbody> 

function AccountStatementViewModel(companyID) { 
    var self = this; 
    ... 
    var AccountStatement = { 
     AccountStatementID: self.AccountStatementID, 
     CompanyID: self.CompanyID, 
     Description: self.Description, 
     Amount: self.Amount, 
     ReceiptDate: self.ReceiptDate, 
     Type: self.Type 
    } 

    self.AccountStatement = ko.observable(); 
    self.AccountStatements = ko.observableArray(); 

    $.ajax({ 
     url: webroot + 'AccountStatement/GetAccountStatements', 
     contentType: 'application/json; charset=utf-8', 
     data: { id: self.CompanyID }, 
     cache: false 
    }).done(function (data) { 
     self.AccountStatements(data); 
    }); 
    ... 
    self.edit = function (accountStatement) { 
     $('#lnkAddAccountStatement').hide('blind', 1000); 
     $('#pnlAddEditAccountStatement').show('blind', 1000); 
     self.AccountStatement(accountStatement); 
    } 
    ... 
} 

नियंत्रक json में परिणाम देता है

दिनांक को प्रारूपित करने के लिए कोड यहां दिया गया है:

ko.bindingHandlers.date = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
     var textContent = moment(valueUnwrapped).format("DD/MM/YYYY"); 
     ko.bindingHandlers.text.update(element, function() { return textContent; }); 
    } 
}; 

इस चरण में, दिनांक सही स्वरूप में प्रदर्शित किया जाता है, तो अगर मैं संपादित करें बटन क्लिक किया, पाठ बॉक्स में ReceiptDate स्वरूपित नहीं है। ReceiptDate टेक्स्ट बॉक्स की अधिकतम

कोड:

<input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="value: AccountStatement().ReceiptDate" /> 

अगर मैं data-bind="date: AccountStatement().ReceiptDate" को बदलने के टेक्स्ट बॉक्स खाली हो जाएगा।

टेक्स्टबॉक्स में दिनांक को कैसे प्रारूपित करें?

अद्यतन

मैं इस link में के रूप में की तारीख बाध्यकारी हैंडलर बदल दिया है लेकिन ReceiptDate के पाठ बॉक्स मूल्य अब भी है ध्यान में रखते हुए /Date(1447261200000)/

परिवर्तन:

<input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="date: AccountStatement().ReceiptDate" /> 

और की तारीख तालिका में रसीद खाली हो गई है:

<td data-bind="date: ReceiptDate"></td> 

Answer 1

आपके अपडेट में, $root.ReceiptDate मौजूद नहीं है। ReceiptDate खातास्टेटमेंट डेटा का सदस्य है। संदर्भ के स्तरों का ट्रैक रखना महत्वपूर्ण है।

आपका date बाध्यकारी एक value सेट हो जाएगा, तो आप कुछ ले जाएगा कि एक text (अपने अद्यतन उदाहरण में एक td की तरह) बांधने के लिए इसका इस्तेमाल नहीं कर सकते हैं।

आपको इसके लिए बाध्यकारी की आवश्यकता नहीं है, आपको केवल एक स्वरूपण फ़ंक्शन की आवश्यकता है, जिसे आप चुनने वाले बाध्यकारी में उपयोग कर सकते हैं। यदि आप मान को संपादित करने में सक्षम होना चाहते हैं, तो आपको अपने दिनांक मूल्य के आधार पर writable computed बनाना चाहिए और value बाइंडिंग में इसका उपयोग करना चाहिए। मैं इसे यहां प्रदर्शित नहीं करता हूं।

ajaxData = [{ 
 
    "AccountStatementID": 2, 
 
    "CompanyID": 1, 
 
    "Description": "test", 
 
    "Amount": 1000, 
 
    "ReceiptDate": "/Date(1447261200000)/", 
 
    "Type": "Payment" 
 
}]; 
 

 

 
vm = { 
 
    AccountStatements: ko.observableArray(ajaxData), 
 
    formatDate: function(textValue) { 
 
    return moment(textValue).format("DD/MM/YYYY"); 
 
    } 
 
}; 
 

 
ko.applyBindings(vm); 
 

 
// Add a row 
 
setTimeout(function() { 
 
    vm.AccountStatements.push({ 
 
    "AccountStatementID": 2, 
 
    "CompanyID": 1, 
 
    "Description": "test", 
 
    "Amount": 1000, 
 
    "ReceiptDate": "/Date(1448271200000)/", 
 
    "Type": "Payment" 
 
    }) 
 
}, 2500);

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table border=1> 
 
    <tbody data-bind="foreach: AccountStatements, visible: AccountStatements().length > 0"> 
 
    <tr> 
 
     <td data-bind="attr: { id: AccountStatementID }"> <a href="#" class="btn btn-primary btn-xs" data-bind="click: $root.edit"><i class="glyphicon glyphicon-pencil"></i></a> 
 
     <a href="#" class="btn btn-danger btn-xs" data-bind="click: $root.delete"><i class="glyphicon glyphicon-remove"></i></a> 
 

 
     </td> 
 
     <td data-bind="text: Description"></td> 
 
     <td data-bind="text: Amount"></td> 
 
     <td data-bind="text: $parent.formatDate(ReceiptDate)"></td> 
 
     <td> 
 
     <input type="text" class="form-control fdatepicker" readonly="readonly" data-bind="value: $parent.formatDate(ReceiptDate)" /> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

एक कस्टम नीलामी करने से एक overkill है।आपका कस्टम बाध्यकारी कस्टम बाइंडिंग के योग्य कुछ भी नहीं कर रहा है।

आपको केवल एक गणना करने योग्य अवलोकन योग्य है जो वर्तमान दिनांक का टेक्स्ट प्रारूप देता है।

var myDate = ko.observable(); 

और कहीं आप कोड है कि इसमें कुछ तारीख वस्तु कहते हैं:

मान लीजिए कि आप कहीं इस चर करते

myDate.formatted = ko.pureComputed(function() { 
    return moment(myDate()).format("DD/MM/YYYY"); 
}); 

:

myDate(input); // where input is some date object you got somehow from somewhere 

अब आप सभी की जरूरत है

अब आप सामान्य टेक्स्ट बाइंडिंग का उपयोग कर सकते हैं:

(यह मानते हुए आप इस दृश्य को देखने के लिए बाध्य मॉडल में myDate है)

<td data-bind="text: myDate.formatted"></td> 

नोट:

myDate.formatted के बारे में विशेष कुछ भी नहीं है। यदि आप इसके बारे में सोचते हैं, myDate केवल एक फ़ंक्शन है, और फ़ंक्शन ऑब्जेक्ट्स हैं ताकि आप उन्हें मनमाने ढंग से फ़ील्ड संलग्न कर सकें।

यह वास्तव में अलग नहीं सब पर इस तरह एक नया वेरिएबल बनाने से: में

var myFormattedDate = ko.pureComputed(function() { 
    return moment(myDate()).format("DD/MM/YYYY"); 
}); 

और यह का उपयोग कर एक बाध्यकारी:

<td data-bind="text: myFormattedDate"></td>