1

KnockoutJS で興味深い異常に遭遇したようです。

ko.obseravableArray を含むオブジェクトがあります。

バインディングを適用する前に、プログラムで項目を配列に追加できます。UI が更新されると、正しく表示されます。次に、ボタンをクリックして項目を配列に追加すると、何も起こらなかったように見えます。ただし、配列からアイテムを削除すると、UI が更新されます。 

 var Feature = function (desription, price)
 {
    var self = this;

    var _description = desription;
    self.description = ko.observable(_description);

    var _price = price;
    self.price = ko.observable(_price);
}

var ItemFeature = function(feature) 
 {
    var self = this;

    var _feature = feature;
    self.feature = ko.observable(_feature);
}

var Item = function ()
{
    var self = this;

    self.featuresList = [
    new Feature("Feature 1", 1.50),
    new Feature("Feature 2", 2.00)
    ];

    self.features = ko.observableArray();

    self.addNewFeature = function () {
        self.features().push(new ItemFeature(self.featuresList[0]));
    }

    self.removeFeature = function (sender) {
        self.features.remove(sender);
    }
}

var _viewModel = new Item();
_viewModel.addNewFeature();
ko.applyBindings(_viewModel);

そしてマークアップ：

 <table>
            <thead><tr>
                <th>Feature</th>
                <th>Cost</th>
            </tr></thead>
            <tbody data-bind="foreach: features">
                <tr>
                    <td><select data-bind="options: $root.featuresList, value: feature, optionsText:'description'"></select></td>
                    <td data-bind="text: feature().description"></td>
                    <td data-bind="text: feature().price"></td>
                    <td><a href="#" data-bind="click: $root.removeFeature">Remove</a></td>
                </tr>
            </tbody>
        </table>

        <a href="#" data-bind="click: addNewFeature">Add a feature</a>

その例もまとめてみました。 http://jsfiddle.net/Q6J6a/7/

小さな何かが欠けているように感じますが、飛び出していません。

4

1 に答える 1

3

あなたがしたい：

self.features.push(new ItemFeature(self.featuresList[0]));

それよりも：

self.features().push(new ItemFeature(self.featuresList[0]));

pushしたがって、基になる配列ではなく、observableArrayを呼び出して、サブスクライバーに通知する必要があります。

http://jsfiddle.net/rniemeyer/Q6J6a/8/

于 2012-05-16T04:47:36.987 に答える