选择列表初始化时淘汰赛触发更改事件

Question

我遇到了敲除选择列表绑定的问题，我的问题是我有一个项目列表，其中包含描述、键和可编辑。使用我正在填充选择框的项目列表。

  var RequiredItemLine = function () {
            var self = this;

            self.desc = ko.observable();
            self.key = ko.observable();
            self.editable = ko.observable(false);

            self.requireditemsdata = ko.observableArray([
               { desc: "Boarding of exposed wall openings in the vicinity of ...", key: "233", editable: true },
               { desc: "Call in manufacturers to initiate repairs on ...", key: "242", editable: true },
               { desc: "Call in specialist restorers/recoverers for ...", key: "244", editable: true },
               { desc: "Dispatch items for repair (schedule enclosed)", key: "243", editable: false },
               { desc: "Drying and cleaning of contents comprising ...", key: "240", editable: true },
               { desc: "Drying and protective oiling of water affected equipment", key: "241", editable: false },
               { desc: "Drying out of the affected areas of the premises", key: "235", editable: false },
               { desc: "Removal and repackaging of stock comprising ...", key: "239", editable: true },
               { desc: "Removal of agreed vulnerable contents to a place of safety (schedule enclosed) ", key: "236", editable: false },
               { desc: "Segregation of affected and unaffected stock comprising ...", key: "238", editable: true },
               { desc: "Temporary covering of roof to reinstate water tight integrity ", key: "234", editable: false },
               { desc: "Temporary guarding of affected area", key: "237", editable: false },
               { desc: "Temporary shoring of affected structure", key: "232", editable: false }]);

            self.selectedItem = ko.observableArray([]);

            self.selectedItem.subscribe(function (newValue) {

                if (newValue) {
                    self.editable(newValue.editable);
                    //alert(newValue.editable);
                }
            });

        }

当用户从选择列表中选择一个选项时，它包含可编辑属性，然后选择列表必须从 DOM 中隐藏，文本框必须对 DOM 可见，并且必须从选定的 desc 中分配值选择列表。

       var RequiredItems = function () {

            var self = this;

            self.requiredItemSelection = ko.observableArray([]);

            self.addRequiredItem = function () {
                self.requiredItemSelection.push(new RequiredItemLine());

            };
            self.removeRequiredItem = function (line) {
                self.requiredItemSelection.remove(line);
            };

        }

        var vm = new RequiredItems();
        ko.applyBindings(vm);

问题是只要选择要加载到DOM更改事件即可触发并显示选择列表或输入字段。

             <div class='liveExample' > 

     <button data-bind='click: addRequiredItem'>Add Required Item</button>
     <hr />

<table width='100%'>

    <tbody data-bind='foreach: requiredItemSelection'  >
        <tr>
            <td >
                <select data-bind='options: requireditemsdata, optionsText: "desc", value: selectedItem'> </select>
            </td>  

            <td>
                <a href='#' data-bind='click: $parent.removeRequiredItem'> <img src="../images/Close.gif" /></a>
            </td>
        </tr>
        <tr data-bind="visible : selectedItem().editable">
            <td>
                <div class="editablecontent" data-bind='html : selectedItem().desc.replace(/\.\.\./g, "<span style=&#39;background-color:#ff77ee;margin-left:-2px;letter-spacing:0.05em&#39; contenteditable >...</span>")'></div>


            </td> 
        </tr> 

    </tbody>
</table>

<ul data-bind='foreach: requiredItemSelection'>


    <li data-bind="text : selectedItem().desc "></li>
</ul>  




</div>

看小提琴http://jsfiddle.net/aroor/VFv4H/3/ 注意：我不想使用 optionsCaption 绑定。有没有办法解决这个问题？还是我没有正确声明数据结构？

Answer 1

如果设置为默认值，它不会触发。

在optionsCaption 中写一些东西。使用此语法添加标题：

<select data-bind="options: xxxx, 
                   optionsCaption:'select', 
                   optionsText: yyyy, 
                   value:  jjjjj"> 
</select>

否则你可以使用 optionsCaption 如下所示

<select data-bind="options: xxxx,
                optionsCaption: ' ',
               optionsText: yyyy, 
              value:  jjjjj"> 
</select>

Answer 2

我在寻找这个问题的答案时遇到了这篇文章。我不确定这是否仍然是一个问题，但也许下一个人会受益。

如果我理解正确，问题在于淘汰数据绑定会触发淘汰事件，从而实现了不需要的逻辑。我对实际的 JavaScript 事件做了一些比较，发现敲除触发的事件与用户交互触发的事件具有不同的属性。

这是我通过检查这些属性的存在来解决此问题的方法。

改为：

self.addRequiredItem = function () {
    self.requiredItemSelection.push(new RequiredItemLine());
};

试试这个：

self.addRequiredItem = function (ko_object, js_evt) {
    if(js_evt.cancelable === false) {
        self.requiredItemSelection.push(new RequiredItemLine());
    }
};

您可以而且应该利用这样一个事实，即您可以将淘汰赛模型和 JavaScript 事件传递到您的事件中。淘汰赛 dom 事件中似乎不存在可取消属性，因此我对其进行了检查以确保该事件是由用户触发的。