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バインディングは、書き込み対象のプロパティが監視可能であることを期待しています。現在の構造では、あまり多くの変更を加えることなくこの作業を行うことができます。

1つの選択肢は、選択したアイテムと編集用のコピー（オブザーバブル付き）の両方を保持することです。だから、あなたはとのようなものを持っているでしょ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-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 に答える