Sự kiện thay đổi cháy nổ khi danh sách lựa chọn khởi tạo

Question

Tôi đang gặp vấn đề với danh sách chọn loại trực tiếp, Vấn đề của tôi là tôi đang có danh sách các mục có chứa mô tả, khóa và có thể chỉnh sửa. bằng cách sử dụng danh sách các mục tôi đang điền vào hộp chọn.

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

     } 

bất cứ khi nào người dùng chọn một tùy chọn từ danh sách lựa chọn, nó chứa thuộc tính có thể chỉnh sửa, sau đó danh sách lựa chọn có để ẩn từ DOM và hộp văn bản phải được hiển thị cho DOM và giá trị đã đến giao từ desc đã chọn từ danh sách chọn.

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

sự cố là bất cứ khi nào lựa chọn đang tải đến sự kiện thay đổi DOM đang kích hoạt và hiển thị danh sách lựa chọn hoặc trường nhập.

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

thấy fiddle http://jsfiddle.net/aroor/VFv4H/3/ Lưu ý: Tôi không muốn sử dụng optionsCaption ràng buộc. có cách nào để giải quyết vấn đề này không? Hay tôi không khai báo cấu trúc dữ liệu đúng cách?

Answer 1

Nó sẽ không kích hoạt nếu bạn đặt giá trị mặc định.

Viết nội dung nào đó trong optionsCaption. Sử dụng cú pháp này để thêm một chú thích:

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

hoặc nếu không bạn có thể sử dụng optionsCaption như hình dưới đây

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

Answer 2

Tôi đã xem qua bài đăng này trong khi tìm kiếm câu trả lời cho câu hỏi này. Tôi không chắc liệu đây có phải là vấn đề hay không nhưng có lẽ người tiếp theo sẽ được hưởng lợi.

Nếu tôi hiểu chính xác, vấn đề là dữ liệu loại trực tiếp liên quan đến các sự kiện loại trực tiếp do đó thực hiện logic không mong muốn. Tôi đã làm một số so sánh các sự kiện JavaScript thực tế và phát hiện ra rằng các sự kiện được kích hoạt bởi loại trực tiếp có các thuộc tính khác nhau mà các sự kiện được kích hoạt bởi tương tác của người dùng.

Dưới đây là cách tôi giải quyết vấn đề này bằng cách kiểm tra sự hiện diện của các thuộc tính này.

Thay vì điều này:

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

Hãy thử điều này:

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

Bạn có thể và nên tận dụng thực tế là bạn có thể vượt qua mô hình loại trực tiếp và sự kiện JavaScript vào sự kiện của bạn. Thuộc tính có thể hủy bỏ dường như không tồn tại trên các sự kiện loại trực tiếp do đó tôi đã kiểm tra để đảm bảo rằng sự kiện đã được kích hoạt bởi người dùng.