Question

那么，以前有人曾试过这个吗？有没有办法将语义UI下拉列表与KnockoutJS集成？最好使用select选择下拉列表，因为我想将它整合到我的表单上。

Answer 1

是的，你想做什么？

以下是示例：

<div class="ui selection dropdown" id="ProjectDD">
    <input type="hidden" name="project">
    <i class="dropdown icon"></i>
    <div class="default text">Project...</div>
    <div class="menu" data-bind="foreach: ProjectCollection">
        <div class="item" data-bind="text: name, attr: {'data-value':id}"> 
        </div>
    </div>
</div>

Answer 2

我遇到了同样的问题，想出办法。问题似乎是由knockout.js生成的空选项值。因此，在敲除绑定后为选项分配值，然后初始化下拉列表解决了问题。

//after ko.applyBindings
var i=1;
$("#dropdown > option").each(function() {
    this.value=i;
    i++;
});
$('.ui.dropdown').dropdown();

Answer 3

是的，您可以使用像此HTML

这样的选择来实现

<div class="ui form">
    <div class="field">
        <select data-bind="options: optionsText,
                           value: selectedOption,
                           optionsCaption: 'Select Options'">
        </select>
    </div>
</div>

和淘汰视图模型

var ViewModel = function() {
    var self=this;
    self.optionsText=ko.observableArray(['Some','Thing','Like','This']);
    self.selectedOption=ko.observable();
    self.selectedOption.subscribe(function(newValue) {
        alert("Selected value " + newValue);
    });
};
ko.applyBindings(new ViewModel());

您可以看到演示jsFiddle

使用KnockoutJS进行语义UI选择下拉列表

3 个答案: