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

Question

我的解決方案使用模板和組件方法。 我在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>

Answer 1

為了回答這個問題，我們需要知道下拉組件的作用。

但是我將嘗試根據問題中的信息來回答查詢。

您有一個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/