如何使用淘汰赛更新下拉列表

时间:2019-01-18 14:43:51

标签: javascript jquery knockout.js

我的解决方案使用模板和组件方法。我在ui中有一个自定义的通用下拉菜单,并且使用带有文本框输入的模式窗口,其中包括另一个模板和组件。我想在文本框区域中输入新的项目值。在我需要添加新项之后,刷新dowpdown列表

我的观点

<dropdown params="{options: $component.displayImages, 
                    value: $component.selected.displayImage, 
                    optionsText: 'label', 
                    optionsCaption: 'Sélectionner une image ...',
                    enabled:$component.displayImageEnabled(), 
                    medium: $root.isTemplateMode(), 
                    large: !$root.isTemplateMode()}"></dropdown>

1 个答案:

答案 0 :(得分:0)

要回答这个问题,我们需要知道下拉组件的作用。

但是我将尝试根据问题中的信息回答查询。

您有一个select下拉列表,其值需要根据后端viewmodel数组进行更新。

您可以参考以下代码

HTML

<select>
<!-- ko foreach :availablePersons -->
 <option data-bind="text:$data.value"></option>
 <!--/ko-->
</select>

 <input type="text" data-bind="value: newPerson"></input>
 <input type="button" value="Add" data-bind="click:addPerson"></input>

查看模型:

// Overall viewmodel for this screen, along with initial state
function SelectionModel() {
    var self = this;

self.addPerson=function(){
self.availablePersons.push({key:self.newPerson(), value:self.newPerson()});
self.newPerson("");
}

    self.newPerson = ko.observable("");
    // Non-editable catalog data - would come from the server
    self.availablePersons = ko.observableArray([
        { key: 1, value: "Jerin" },
        { key: 2, value: "Arjun" },
    ]);    

}

ko.applyBindings(new SelectionModel());

JS小提琴:http://jsfiddle.net/07jerin/Lzpftc82/