6

jsFiddle の例

選択可能な項目がobservableArrayあります (テーブル内)。私がやろうとしているのは、テーブルの行をクリックしてモーダルを開き、モーダルにアイテムの詳細を入力し、アイテムの編集を許可してから変更を保存することです - 更新されたアイテムをobservableArray. これまでのところ、他のすべてが機能していますが、配列アイテムを更新できないようです。

これまでのところ、私は試しました：

  • observableArrayすべてのアイテムを作るobservable
  • 配列を使用.replaceしてアイテムを更新する-これは機能しますが、気分が悪いだけです
  • 更新されたアイテムをポストバックし、それをデータベースに適用し、配列を再バインドします - これは機能しますが、これは KnockoutJS のポイントを無効にしませんか?

私が達成しようとしていることを示す上記の jsFiddle リンクを提供しました。

モデルの表示と初期化

self.selectItem私は現在 KnockoutJS の学習段階にあり、モック プロジェクトをいじって初期化する方法について自由に提案をしてください。

var items = [{
    Id: 1,
    Text: 'First item'
}, {
    Id: 2,
    Text: 'Second item'
}];

var viewModel = function (items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.selectedItemId = ko.observable();
    self.item = ko.observable();
    self.selectItem = function (item) {
        for (var i = 0; i < self.items().length; i++) {
            if (self.items()[i].Id === self.selectedItemId()) {
                self.item(self.items()[i]);
                break;
            }
        }
    };
};

ko.applyBindings(new viewModel(items));

マークアップ バインディング

<select data-bind="options: items, optionsCaption: 'Select...', optionsText: 'Text', optionsValue: 'Id', value: selectedItemId, event: { change: selectItem }"></select>
<div data-bind="if: item">
    <input type="text" data-bind="value: item().Text" />
</div>
<table>
    <thead>
        <tr>
            <th>Text</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: $data.Text"></td>
        </tr>
    </tbody>
</table>
4

3 に答える 3

3

「Text」プロパティを変更すると、項目が更新される新しいjsFiddleの例を作成しました。

あなたの問題は「items」変数でした。アイテムのプロパティを更新したい場合は、それらを監視可能にする必要があります:

var observableItems = [
    new ItemViewModel(1, "First item"),
    new ItemViewModel(2, "Second item")
];

function ItemViewModel(id, text){
    var self = this;
    self.Id = ko.observable(id);
    self.Text = ko.observable(text);
}

それが役に立てば幸い ！

于 2013-07-16T08:05:34.277 に答える
1

Text プロパティをオブザーバブルに変換する必要があります。私はko.mappingを使用することにしました。ko.mapping.fromJS は、すべての js プロパティを ko.observables に変換します。

post メソッドでは、監視可能なビューモデルを生データに変換します。

var viewModel = function (items) {
    var self = this;
    // to observable
    self.items = ko.mapping.fromJS(items);
    self.selectedItemId = ko.observable();
    self.item = ko.observable();
    self.selectItem = function (item) {
        for (var i = 0; i < self.items().length; i++) {
            if (self.items()[i].Id() === self.selectedItemId()) {
                self.item(self.items()[i]);
                break;
            }
        }
    };

    self.post =  function(){
    // to raw js object
        var data =  ko.mapping.toJS(self.items);
        console.log(JSON.stringify(data));
    };

};

フィドルを見る

于 2013-07-16T08:24:54.727 に答える