Question

当我尝试加载select数据时，我遇到了麻烦。一旦页面加载，当我第一次点击选择它没有显示任何数据。我关闭它，当我再次点击选择时它会显示数据。

有什么建议吗？的 HTML

<div>   
<select data-bind="options: values, value: option, optionsCaption: 'Selecione...', event: { click: onClickSelect }" ></select>
<label data-bind="text: option"></label>

JS

var ViewModel = {
    option : ko.observable(),
    values : ko.observableArray()
};

ViewModel.onClickSelect = (function() {  
    //Simulate server side 
    setTimeout(function()
               {
                   ViewModel.values(["one", "two", "three"]);
               }, 2000);

});

ko.applyBindings(ViewModel);

有什么建议吗？

Answer 1

有办法做到这一点。

试试这段代码

ViewModel.onClickSelect = function (v, e) {
    var sel = e.target;
    if (sel.childNodes.length === 1) {      
        sel.childNodes[0].innerText = 'Loading...'
        setTimeout(function () {
            sel.childNodes[0].innerText = 'Selecione...'
            ViewModel.values(["one", "two", "three"]);
            sel.blur();
            v.openSelect(sel);
        }, 2000);
    } 
};

//to open 'select' programmatically
ViewModel.openSelect = function (element) {
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent('mousedown', true, true, window);
        element.dispatchEvent(e);
    } 
    else if (element.fireEvent) element.fireEvent("onmousedown");
};

ko.applyBindings(ViewModel);

演示 JSFiddle

Answer 2

很自然。

第一次加载页面时，values数组为空，因此下拉列表中没有任何内容显示。然后，当您单击下拉列表时，将触发select，它将调用此代码：

 setTimeout(function()
           {
               ViewModel.values(["one", "two", "three"]);
           }, 2000);

这段代码的作用是，在等待两秒后，它会在下拉列表中加载3个值。因此，如果您关闭下拉列表，并在至少2秒钟后再次单击它，那么选项就在那里。如果你做得足够快，你会意识到在2秒之前再次点击下拉，选择已经是空的。

因此，代码正如预期的那样完美运行。对于你的问题，我们无法知道你想要做什么。

使用Knockout点击选择

2 个答案: