Question

我从服务器获取选择列表并填充observableArray。然后我想将所选项目设置为预定义的值。我有一个非常简单的jsFiddle，它通过单击按钮模拟从服务器提取数据。

以下是基本尝试的Javascript：

(function() {
    var vm = (function() {
        var self = this;        
        self.array = ko.observableArray([]);        
        self.selectedValue = ko.observable();
        self.useSetTimeout = ko.observable(false);        
        self.array.subscribe(function(newValue) {
            self.selectedValue('b');
        });       
        self.populate = function() {
            self.array(['a','b','c']);
        };       
    }());
    ko.applyBindings(vm);
}());

这是我的解决方法，它取代了“self.selectedValue（'b'）;”：

var waitForSelectToPopulate = function() {
    self.selectedValue('b');
    if(self.selectedValue() != 'b') {
        setTimeout(waitForSelectToPopulate, 10);
    }
};
waitForSelectToPopulate();

我不太喜欢这种解决方法。似乎应该有一个合理的方法来处理这个，但只是在subscribe触发器上设置值似乎不起作用。

Answer 1

你需要optionsAfterRender。这是一个小提琴：

http://jsfiddle.net/sifriday/hev1rqeu/4/

HTML -

<select data-bind="options: array, value: selectedValue, optionsAfterRender: setVal">

JS补充 -

    self.setVal = function() {
        self.selectedValue('b');
    }

文档 - http://knockoutjs.com/documentation/options-binding.html - 并向下滚动到注释2

Answer 2

一旦populate事件消失并获得了json并将其放入数组中，为什么不立即设置值呢？一旦你在self.array中设置了数据，它就会更新。

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

        self.array = ko.observableArray([]);
        self.selectedValue = ko.observable();

        self.populate = function() {
            // magical assmagic goes and get's json, and converts it to ['a','b','c']
            self.array(['a','b','c']); // dropdown is now populated
            self.selectedValue('c');   // therefore we can set it to a valid value
        };

    }());
    ko.applyBindings(vm);
}());

请参阅以下内容： http://jsfiddle.net/hev1rqeu/5/

Knockout预定义默认值，其中包含绑定到observable数组的选项

2 个答案: