Question

我认为在订阅数组时我可能做得太早：http://jsfiddle.net/ruslans/gQ8zs/

的javascript：

function vm() {
    var self = this;

    self.priceList = ko.observableArray();
    self.selectedPrice = ko.observable();
    self.defaultPrice = ko.observable();

    self.populatePriceList = function () {
        self.priceList([{
            Id: 1,
            NetPrice: 123,
            IsDefault: false
        }, {
            Id: 2,
            NetPrice: 123.99,
            IsDefault: true
        }, {
            Id: 3,
            NetPrice: 199.99,
            IsDefault: false
        }]);
    };
    self.priceList.subscribe(function () {
        ko.utils.arrayForEach(self.priceList(), function (price) {
            if (price.IsDefault === true) {
                self.defaultPrice(price.NetPrice);
                self.selectedPrice(price);
            }
        });
    });
}

ko.applyBindings(new vm());

HTML：

<button data-bind="click: populatePriceList">Populate Price List</button>
<br />
<p data-bind="text: defaultPrice"></p>
<select data-bind="options: priceList, optionsText: 'NetPrice', value: selectedPrice"></select>

我希望默认值设置为“123.99”

Answer 1

http://jsfiddle.net/ruslans/mSLZa/

你可以用辅助函数来做到这一点：

function vm() {
    var self = this;

    self.priceList = ko.observableArray();
    self.selectedPrice = ko.observable();
    self.defaultPrice = ko.observable();

    self.populatePriceList = function () {
        self.priceList([{
            Id: 1,
            NetPrice: 123,
            IsDefault: false
        }, {
            Id: 2,
            NetPrice: 123.99,
            IsDefault: true
        }, {
            Id: 3,
            NetPrice: 199.99,
            IsDefault: false
        }]);

        ko.utils.arrayForEach(self.priceList(), function (price) {
            if (price.IsDefault === true) {
                self.defaultPrice(price.NetPrice);
                self.selectedPrice(price);
            }
        })
    };
}

ko.applyBindings(new vm());

Answer 2

在更新下拉列表之前调用priceList订阅函数。

您应该在更新下拉列表后使用函数walueWillMutate / valueHasMutated来呼叫订阅者。

function vm() {
    var self = this;

    self.priceList = ko.observableArray();
    self.selectedPrice = ko.observable();
    self.defaultPrice = ko.observable();

    self.populatePriceList = function () {
        self.priceList.valueWillMutate();
        self.priceList([{
            Id: 1,
            NetPrice: 123,
            IsDefault: false
        }, {
            Id: 2,
            NetPrice: 123.99,
            IsDefault: true
        }, {
            Id: 3,
            NetPrice: 199.99,
            IsDefault: false
        }]);
        self.priceList.valueHasMutated();
    };

    self.priceList.subscribe(function () {
        ko.utils.arrayForEach(self.priceList(), function (price) {
            if (price.IsDefault === true) {
                self.defaultPrice(price.NetPrice);
                self.selectedPrice(price);
            }
        });
    });
}

ko.applyBindings(new vm());

Answer 3

在applyBindings()之后设置值不一定是解决此问题的正确方法。使用ko.computed可以更有效地实现在订阅者中迭代数组的部分。这还可确保在阵列内容发生变化时保持默认价格。以下是我将如何解决同样的问题。阵列可以在前面设置，defaultPrice应该是只读的。你的视图模型看起来像这样;

function vm() {
    var self = this;

    self.priceList = ko.observableArray([{
            Id: 1,
            NetPrice: 123,
            IsDefault: false
        }, {
            Id: 2,
            NetPrice: 123.99,
            IsDefault: true
        }, {
            Id: 3,
            NetPrice: 199.99,
            IsDefault: false
        }]);

    self.selectedPrice = ko.observable();
    self.defaultPrice = ko.computed(function(){
        ko.utils.arrayForEach(self.priceList(), function (price) {
            if (price.IsDefault) {
                return price;
            }
        });
    });
};

绑定选项后设置默认值

3 个答案: