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>

请将其标记为答案

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

2 个答案: