0

我不确定这里出了什么问题，但我们使用的是来自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>
4

2 回答 2

1

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

一种选择是同时保留所选项目和副本（带有可观察对象）以进行编辑。所以，你会有类似selectedItemand的东西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-17T21:59:55.970 回答
1

你好，我发现了问题，

更改如下代码，它将完美运行。

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

请将其标记为答案

于 2013-02-18T05:25:37.067 回答