2012-06-14 29 views
33

Tôi đang tìm kiếm chức năng không liên kết trong loại trực tiếp. Thật không may googling và nhìn qua các câu hỏi được yêu cầu ở đây đã không cho tôi bất kỳ thông tin hữu ích về chủ đề này.Mô hình xem không liên kết từ chế độ xem trong loại bỏ

Tôi sẽ cung cấp ví dụ để minh họa loại chức năng nào là bắt buộc.

Cho phép nói rằng tôi có biểu mẫu có một số yếu tố đầu vào. Ngoài ra tôi có một mô hình xem được liên kết với biểu mẫu này. Đối với một số lý do như là một phản ứng về hành động của người dùng, tôi cần hủy mô hình xem của mình khỏi biểu mẫu, tức là vì hành động được thực hiện, tôi muốn tất cả các quan sát của tôi ngừng phản ứng về những thay đổi của giá trị tương ứng và ngược lại - bất kỳ thay đổi nào được thực hiện cho quan sát 't ảnh hưởng đến giá trị của đầu vào.

cách tốt nhất để đạt được điều này là gì?

Trả lời

45

Bạn có thể sử dụng ko.cleanNode để xóa các ràng buộc. Bạn có thể áp dụng điều này cho các phần tử DOM cụ thể hoặc các vùng chứa DOM cấp cao hơn (ví dụ: toàn bộ biểu mẫu).

Xem http://jsfiddle.net/KRyXR/157/ để biết ví dụ.

+2

rực rỡ! Cảm ơn bạn! – ILya

+2

lần sau viết getElementById chứ không phải $ ("# theid") [0] vẫn tốt hơn để sử dụng JavaScript và không jQuery cho mọi thứ –

+18

Đối với các dự án mà tôi đang sử dụng jquery, tôi rất vui khi từ bỏ 1,5ms để tránh nhập thêm 15 ký tự. Tôi nghĩ rằng tôi sẽ gắn bó với bộ chọn jquery khi tôi có cơ hội. – Donamite

14

@Mark Robinson trả lời là chính xác.

Tuy nhiên, bằng cách sử dụng Đánh dấu câu trả lời tôi đã làm như sau, mà bạn có thể thấy hữu ích.

// get the DOM element 
    var element = $('div.searchRestults')[0]; 
    //call clean node, kind of unbind 
    ko.cleanNode(element); 
    //apply the binding again 
    ko.applyBindings(searchResultViewModel, element); 
+0

+1 cho ko.cleanNode (phần tử) – lamarant

+0

Tôi phải sử dụng điều này sau khi vô hiệu hóa/kích hoạt các yếu tố biểu mẫu theo cách thủ công để khôi phục tự động của các ràng buộc 'kích hoạt 'loại trực tiếp. – casey

1

<html> 
 
    <head> 
 
     <script type="text/javascript" src="jquery-1.11.3.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.js"></script> 
 
     <script type="text/javascript" src="knockout-2.2.1.debug.js"></script> 
 
     <script type="text/javascript" src="clickHandler.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="modelBody"> 
 
      <div class = 'modelData'> 
 
       <span class="nameField" data-bind="text: name"></span> 
 
       <span class="idField" data-bind="text: id"></span> 
 
       <span class="lengthField" data-bind="text: length"></span> 
 
      </div> 
 
      <button type='button' class="modelData1" data-bind="click:showModelData.bind($data, 'model1')">show Model Data1</button> 
 
      <button type='button' class="modelData2" data-bind="click:showModelData.bind($data, 'model2')">show Model Data2</button> 
 
      <button type='button' class="modelData3" data-bind="click:showModelData.bind($data, 'model3')">show Model Data3</button> 
 
     </div> 
 
    </body> 
 
</html>

@ Mark Robinson đã đưa ra giải pháp hoàn hảo, tôi đã có vấn đề tương tự với yếu tố dom single và cập nhật mô hình quan điểm khác về yếu tố dom single này.

Mỗi mô hình chế độ xem có một sự kiện nhấp, khi nhấp vào xảy ra phương pháp nhấp mỗi lần của mỗi mô hình xem được gọi là dẫn đến việc thực thi khối mã không cần thiết trong sự kiện nhấp chuột.

Tôi đã làm theo cách tiếp cận @Mark Robinson để làm sạch Nút trước khi áp dụng các liên kết thực sự của tôi, nó thực sự hoạt động tốt. Cảm ơn Robin. Mã mẫu của tôi giống như thế này.

function viewModel(name, id, length){ 
 
\t \t var self = this; 
 
\t \t self.name = name; 
 
\t \t self.id = id; 
 
\t \t self.length = length; 
 
\t } 
 
\t viewModel.prototype = { 
 
\t \t showModelData: function(data){ 
 
\t \t console.log('selected model is ' + data); 
 
\t \t if(data=='model1'){ 
 
\t \t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t \t \t console.log(viewModel1); 
 
\t \t } 
 
\t \t else if(data=='model2'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel2); 
 
\t \t } 
 
\t \t else if(data=='model3'){ 
 
\t \t ko.cleanNode(button1[0]); 
 
\t \t \t ko.applyBindings(viewModel3, button1[0]); 
 
\t \t \t console.log(viewModel3); 
 
\t \t } 
 
\t } 
 
\t } 
 
\t $(document).ready(function(){ 
 
\t \t button1 = $(".modelBody"); 
 
\t \t viewModel1 = new viewModel('TextField', '111', 32); 
 
\t \t viewModel2 = new viewModel('FloatField', '222', 64); 
 
\t \t viewModel3 = new viewModel('LongIntField', '333', 108); 
 
\t \t ko.applyBindings(viewModel1, button1[0]); 
 
\t }); 
 
\t

Các vấn đề liên quan