नॉकआउटजेएस - अवलोकन योग्य वस्तुओं का अवलोकननीय अरे

Question

मैं वस्तुओं की एक संपादन योग्य सूची प्रदर्शित करना चाहता हूं, जिनमें से प्रत्येक आइटम संपादन योग्य है (एक संपादन योग्य ग्रिड की तरह, एक तरह से)। मैं नॉकआउटजेएस का उपयोग कर रहा हूं। मैं सिर्फ एक साधारण अवलोकन योग्य ऐरे का उपयोग नहीं कर सकता क्योंकि, दस्तावेज कहता है, "एक अवलोकन योग्य ऐरे ट्रैक करता है कि कौन सी ऑब्जेक्ट्स सरणी में हैं, न कि उन वस्तुओं की स्थिति"

इसलिए, मैंने अवलोकन योग्य वस्तुओं (utils का उपयोग करके) का एक अवलोकन योग्य बनाया है। arrayMap), और उन्हें देखने के लिए बाध्य। हालांकि, समस्या यह है कि यदि मैं स्क्रीन पर डेटा संपादित करता हूं, तो उपयोगकर्ता द्वारा स्क्रीन पर किए गए किसी भी डेटा-एंट्री परिवर्तन प्रभावी नहीं होते हैं। http://jsfiddle.net/AndyThomas/E7xPM/

मैं क्या गलत कर रहा हूं?

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js" type="text/javascript"></script> 

<table> 
    <tbody data-bind="template: { name:'productListJavascriptTemplate', foreach: products}"> 
    </tbody> 
</table> 


<script type="text/html" id="productListJavascriptTemplate"> 
<tr> 
    <td>Name: <input data-bind="value: Name"/></td> 
    <td>Name: <span data-bind="text: Name"/></td> 
    <td><select data-bind="options: this.viewModel.categories, 
     optionsText: 'Name', optionsValue: 'Id', value: CategoryId, 
     optionsCaption: 'Please select...'"></select></td> 
    <td>CategoryId: <input data-bind="value: CategoryId"/></td> 

</tr> 

</script>​ 

var categoryList= [ 
{ 
    Name: "Electronics", 
    Id: "1"}, 
{ 
    Name: "Groceries", 
    Id: "2"} 
]; 

var initialData= [ 
{ 
    Name: "Television", 
    CategoryId: "1"}, 
{ 
    Name: "Melon", 
    CategoryId: "2"} 
]; 

var viewModel = { 
    products: ko.observableArray(
     ko.utils.arrayMap(initialData, function(product) { 
           return ko.observable(product); 
     })), 
    categories: ko.observableArray(categoryList)  
}; 


$(function() { 
    ko.applyBindings(viewModel); 

}); 

Answer 1

ko.utils.arrayMap observables के रूप में अपने viewmodel के गुणों को मैप नहीं है, और है कि आप उन्हें क्यों गतिशील रूप से अद्यतन नहीं दिख रहा है।

आप एक नमूदार के रूप में अपने CategoryID को परिभाषित करते हैं, तो आप इसे अपडेट नहीं की उम्मीद के रूप में दिखाई देंगे:

var initialData = [ 
    { 
     Name: "Television", 
     CategoryId: ko.observable("1") 
    }, 
    { 
     Name: "Melon", 
     CategoryId: ko.observable("2") 
    } 
]; 

इस अद्यतन jsfiddle देखें: http://jsfiddle.net/tuando/E7xPM/5/

Answer 2

तुआन के जवाब पर नजर रखने के लिए, मैं पॉप्युलेट करने के लिए की जरूरत मेरी ऑब्जेक्ट्स एक एएसपी.NET एमवीसी नियंत्रक से सर्वर विधि से लौटाए गए डेटा के आधार पर, जहां उत्पादों की सूची दृश्य मॉडल में निहित है, और ड्रॉप डाउन बॉक्स के लिए श्रेणियों की सूची व्यूबैग में है। मैं निम्नलिखित कोड का इस्तेमाल किया है (यह भी http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html देखें):

var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model)); 
var categoryList = @Html.Raw(new JavaScriptSerializer().Serialize(ViewBag.CategoryList)); 

var ObservableProduct = function(name, description, categoryId) {   
    this.Name = ko.observable(name);   
    this.Description = ko.observable(description); 
    this.CategoryId = ko.observable(categoryId); 
}; 

var viewModel = { 
    products: ko.observableArray(ko.utils.arrayMap(initialData, function(product) { 
      return new ObservableProduct(product.Name, product.Description, product.CategoryId); 
     })), 
    categories: ko.observableArray(categoryList)  
}; 

$(function() { 
    ko.applyBindings(viewModel); 

}); 

धन्यवाद, तुआन!

Answer 3

मैं लिखने योग्य गणना observables कि कॉल में प्रारंभ कर रहे हैं

ko.utils.arrayMap करने के लिए अपने मामले में एक overkill हो सकता है का उपयोग कर रहा है, लेकिन यह किसी और मदद कर सकता है। यह jsFiddle sample

// Writeable computed observables 
    function Customer(id, firstName, lastName, preferred) { 
    var self = this; 
    self.id = id; 
    self.firstName = firstName; 
    self.lastName = lastName; 
    // Non-Writeable computed observable 
    self.fullName = ko.computed(function() { 
     var fn = self.firstName; 
     var ln = self.lastName; 
     return ln ? fn + ' ' + ln : fn; 
    }, self); 
    self.preferred = ko.observable(preferred); 
    // Writeable computed observable 
    self.isPreferred = ko.computed({ 
     read: function() { 
      var preferredStr = self.preferred() || ''; 
      var isPreferredComputed = preferredStr.toUpperCase(); 
      return (isPreferredComputed === 'Y') ? true : false; 
     }, 
     write: function(value) { 
      self.preferred((!value) ? '' : (value ? 'Y' : ''));    
     }, 
     owner: self   
    });  
} 
    var mappedData = ko.utils.arrayMap(dataFromServer, function(customer) { 
     return new Customer(customer.id, customer.firstName, customer.lastName, customer.preferred); 
    });