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

问题是每当select加载到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

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

如果我理解正确，问题是敲除数据绑定火敲除事件因此实现了不需要的逻辑。我对实际的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());
    }
};

您可以而且应该利用您可以将淘汰赛模型和JavaScript事件传递到您的活动中的事实。 knockouts dom事件似乎不存在可取消的属性，所以我检查了它以确保事件是由用户触发的。

Answer 2

如果使用默认值设置它，则不会触发。

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

选择列表初始化时，Knockout会触发更改事件

2 个答案: