0

私はノックアウト.JSが初めてです。JSON コレクションをテーブルにバインドしています。

<tbody data-bind="foreach: Collection">
            <tr>
                <td>
                    <span data-bind="text: FirstName" ></span>
                </td>
                <td>
                    <span data-bind="text: LastName" ></span> 
                </td>
                <td>
                    <input type="button" data-bind="click: function(){ obj.RemoveItem($data) }" value="Del" />
                </td>
                <td>
                    <input type="button" data-bind="click: function(){ obj.SaveItems($data.Id) }" value="Edit/Save" />
                </td>
            </tr>
        </tbody>

function viewModel(collection) {
            var self = this;
            this.Collection = ko.observableArray(collection);
            this.AddItem = function() {
                this.Collection.push({FirstName:"", LastName:""});
            };
            this.RemoveItem = function(data) {
                this.Collection.remove(data);
            };
            this.SaveItems = function(id) {
                alert("New Collection: " + ko.utils.stringifyJson(self.Collection));
            }
        };

        var obj = new viewModel([
            { Id: 1,FirstName: "John", LastName: "Saleth" },
            { Id: 2, FirstName: "John", LastName: "Kennedy" }
        ]);

        ko.applyBindings(obj);

各行には、編集ボタンがあり、クリックするとスパンの値を持つすべての TD にテキスト ボックスが挿入されます。そして、保存をクリックすると、スパン要素の値をテキストボックスの値で更新しています。

問題は、span 要素の新しい値が JSON コレクションに反映されないことです。保存ボタンのクリック時に更新されたスパン値で JSON ソースを更新する方法は?

4

1 に答える 1

0

Collection配列の各プロパティも監視可能にする必要があります。

function ItemModel(item) {
    this.Id = ko.observable(item.Id);       
    this.FirstName = ko.observable(item.FirstName);
    this.LastName = ko.observable(item.LastName);     
};


function viewModel(collection) {
    var self = this;
    this.Collection = ko.observableArray();
    ko.utils.arrayForEach(collection, function (i) { self.Collection.push(new ItemModel(i));  });
    this.AddItem = function() {
        this.Collection.push(new ItemModel({
            FirstName: "",
            LastName: ""
        }));
    };
    ...
};
于 2012-10-01T10:22:23.410 に答える