select - 选择列表初始化时 knockout 触发更改事件

Question

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

  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);

the problem is whenever the select is loading to the DOM change event is firing and display the select list or the input field.

             <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>

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

Answer 1

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

如果我理解正确，问题是 knockout 数据绑定(bind)会触发 knockout 事件，从而实现了不希望的逻辑。我对实际的 JavaScript 事件进行了一些比较，发现 knockout 触发的事件与用户交互触发的事件具有不同的属性。

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

而不是这个:

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());
    }
};

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