Question

我正在使用knockout.js。我有类似的情况，

搜索页面将生成搜索结果。带编辑图标，用户点击编辑图标并导航到编辑页面。

在编辑页面上，我有一个下拉列表，应该填充上一个屏幕的值。这是我的代码：

 var vm= {
               Id: ko.observable(),
               Name: ko.observable(),
               description: ko.observable(),
               Type: ko.observable(),
               TypeList: ko.observableArray(),

           };
 var getData = function (Id) {
            var ajaxOptions = {
                url: 'Api/Group/Get?Id=' +Id,
                type: 'GET',
                dataType: 'json'
            };

            function gotData(data) {
                vm.UserGroupId(data.Id);
                vm.Name(data.name);
                vm.description(data.description);

                vm.Type(data.Type);


                return data;
            }

            function getTypes(Data) {

                 //this will fetch me an array of (' ',TypeA,TypeB,TypeC)
                dataService.getTypes(vm.TypeList);
                //remove the empty one
                vm.TypeList.shift();
                //try to populate the value which i got from the search result at the top
                vm.TypeList.unshift({ "name": 'TypeA', "value": '3' });

            }

            return $.ajax(ajaxOptions).then(gotUserGroup).then(getTypes);
    };

现在我面临的问题是，我能够从搜索结果中获取带有值的下拉值。除了从搜索结果中获取值之外，Iam还会获得重复值。

我的Html代码：

<div class="span2 control-label">Type: </div>
                <div class="span4 controls form-inline">
                    <select name="select" data-bind="options: TypeList, optionsText: 'name', optionsValue: 'value', value: Type" />
                </div>

例如：默认情况下dataservice会给我（''，Type A，TypeB，Typec）一旦我在搜索结果中选择了该值，我们假设选择“TypeA” 在UI上，我能够看到值（TypeA，TypeA，TypeB，Typec）。如何消除重复？或者我如何实现这种功能。

Answer 1

来自Knockout文档：（http://knockoutjs.com/documentation/observableArrays.html）

myObservableArray.unshift（'some new value'）在数组的开头插入一个新项目

因此，您要向数组的第一个添加新值并保留已存在的值。因此，您还需要删除已存在的值。

var newItem = { "name": 'TypeA', "value": '3' };
vm.TypeList.remove(newItem);
vm.TypeList.unshift(newItem);

Answer 2

我得到了解决方案最初从db获取值，然后将该值与已有的列表匹配，然后删除所选类型，并使用knockoutjs unshift将所选类型添加到顶部

var selectedType = ko.utils.arrayFirst(vm.TypeList(), function (item) {
                        if (data.Type === item.name)
                            return item;
                        return null;
                    });
                    vm.TypeList.shift();
                    vm.TypeList.remove(selectedType );
                    vm.TypeList.unshift(selectedType );

Knockout.js：在编辑模式下使用数据填充下拉值

2 个答案: