使用Knockout-Kendo不更新observableArray上的項目的值

我不確定這裏有什麼問題，但是我們使用DatePicker從http://rniemeyer.github.com/knockout-kendo/web/DatePicker.html，當我們將項目發送回數組時，該字段沒有得到更新。正如您將在下面的測試中看到的那樣，我們選擇的日期在我們發回時不會更新該項目。任何幫助，非常感謝。謝謝使用Knockout-Kendo不更新observableArray上的項目的值

演示測試 http://s7.postimage.org/68n30bd6z/knockoutjs_knockout_kendo.gif

的jsfiddle http://jsfiddle.net/DiegoVieira/epqUb/4/

var data = 
[ 
    { 
     "name": "Diego", 
     "birthday": "01/01/1984" 
    }, 
    { 
     "name": "Franciele", 
     "birthday": "01/05/1983" 
    } 
]; 

var person = function() { 
    this.id = ko.observable(0); 
    this.name = ko.observable(); 
    this.birthday = ko.observable(); 
} 

function viewModel() { 
    var self = this; 
    self.people = ko.observableArray(data); 
    self.personData = ko.observable(new person()); 
    self.selectedPerson = ko.observable(); 

    self.addPerson = function() { 
     var item = ko.toJS(new person()); 
     item.id = getRandomNumber(); 
     self.people.push(item); 
     self.selectedPerson(item); 
    } 

    self.editPerson = function(item) 
    { 
     self.selectedPerson(item); 
    } 

    self.savePerson = function(item) 
    { 
     var index = self.people.indexOf(item); 
     self.people.remove(item); 
     self.people.splice(index, 0, item); 
     self.selectedPerson(null); 
    } 

    self.deletePerson = function(item) 
    { 
     var index = self.people.indexOf(item); 
     self.people.remove(item); 
    } 
} 
ko.applyBindings(new viewModel()); 




function getRandomNumber(min, max) { 
    if (typeof min === 'undefined') 
     min = 10000000; 
    if (typeof max === 'undefined') 
     max = 99999999; 
    return min + Math.floor(Math.random() * (max - min + 1)); 
}

HTML

<div data-bind="with: $root.selectedPerson"> 
    <table border="1" cellpadding="1" cellspacing="1"> 
     <tr> 
      <td>Name:</td> 
      <td><input data-bind="value: name" /></td> 
     </tr> 
     <tr> 
      <td>Birthday:</td> 
      <td><input data-bind="kendoDatePicker: birthday" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><button data-bind="click: $root.savePerson">Save</button></td> 
     </tr> 
    </table> 
</div> 

<button data-bind="click: $root.addPerson">Add Person</button> 
<ul data-bind="foreach: $root.people"> 
    <li><span data-bind="html: name"></span> (<span data-bind="html: birthday"></span>) <button data-bind="click: $root.editPerson">Edit</button> <button data-bind="click: $root.deletePerson">Delete</button></li> 
</ul>

來源

2013-02-17 Diego Vieira

的kendoDatePicker綁定ing期望它所寫的屬性是可觀察的。利用您當前的結構，您可以在不做太多更改的情況下完成這項工作。

一個選擇是保持選定的項目和副本（與observables）進行編輯。所以，你會有類似selectedItem和originalItem。

你可以更新您的Person構造，使其能夠在諸如數據傳遞：

var Person = function(data) { 
    data = data || {}; 
    this.id = ko.observable(data.id || 0); 
    this.name = ko.observable(data.name); 
    this.birthday = ko.observable(data.birthday); 
};

當選擇一個項目：

self.editPerson = function(item) { 
    self.original(item); 
    self.selectedPerson(new person(item)); 
};

然後，當一個項目被接受，您可以繼續使用相同的邏輯將編輯後的副本替換爲原始項目。

這裏是一個更新的小提琴：http://jsfiddle.net/rniemeyer/h4tsd/

我有這種模式在博客這裏有輕微的選擇：http://www.knockmeout.net/2013/01/simple-editor-pattern-knockout-js.html

來源

2013-02-17 21:59:55

您好，我發現這個問題，

更改代碼如下所示，它會工作完美。

<tr> 
     <td>Birthday:</td> 
     <td><input data-bind="kendoDatePicker: birthday,value: birthday" /></td> 
    </tr>

請把它標記爲答案

來源

2013-02-18 05:25:37 nav0611

使用Knockout-Kendo不更新observableArray上的項目的值

回答

相關問題