使用Knockout-Kendo不会更新observableArray上的物品价值

Question

我不知道这里出了什么问题，但我们使用的是来自http://rniemeyer.github.com/knockout-kendo/web/DatePicker.html的DatePicker，当我们将项发送回数组时，该字段不会更新。正如你可以在下面的测试中看到的那样，我们选择的日期在我们发回物品时不会更新。任何帮助都是非常感谢的。谢谢

演示测试http://s7.postimage.org/68n30bd6z/knockoutjs_knockout_kendo.gif

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

JS

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>

Answer 1

kendoDatePicker绑定期望它正在写入的属性是可观察的。使用您当前的结构，您可以在不做太多更改的情况下使其工作。

一种选择是同时维护所选项目和副本(具有可观察性)以供编辑。所以，你应该有像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

Answer 2

你好，我发现问题是，

像下面这样修改代码，它将完美地工作。

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

请将其标记为Answer