Knockoutjs ràng buộc di chuột qua hoặc Jquery

Question

Tôi có mã này trong jquery. Làm thế nào tôi sẽ viết điều này trong loại trực tiếp với ràng buộc. Hoặc là tốt hơn để có nó trong jquery. Có một cách thông minh để biết khi nào để viết nó trong ràng buộc hoặc trong jquery? Đây là nhiều viewstuff nên có lẽ nó nên ở trong Jquery?

$("body").on("mouseover mouseout", '.hoverItem', function() { 
    $(this).toggleClass('k-state-selected'); 
}); 

Answer 1

Nếu việc chuyển đổi lớp này không thực sự cần kết nối với dữ liệu trong mô hình chế độ xem của bạn, thì thực sự không có lý do gì bạn không thể làm những gì bạn đang làm bây giờ.

Dưới đây là một mẫu của làm thế nào để làm điều đó với các ràng buộc mặc định:

xem:

<ul data-bind="foreach: items"> 
    <li data-bind="text: name, event: { mouseover: toggle, mouseout: toggle }, css: { hover: selected }"></li> 
</ul> 

xem mô hình mã:

var Item = function(name) { 
    this.name = ko.observable(name); 
    this.selected = ko.observable(false); 
    this.toggle = function() { 
     this.selected(!this.selected()); 
    } 
}; 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one"), 
     new Item("two"), 
     new Item("three") 
    ]) 
}; 

ko.applyBindings(viewModel); 

Với cam kết ràng buộc tùy chỉnh bạn có thể thậm chí giảm nó xuống đến:

<ul data-bind="foreach: items"> 
    <li data-bind="text: name, hoverToggle: 'hover'"></li> 
</ul> 

xem mô hình:

ko.bindingHandlers.hoverToggle = { 
    update: function(element, valueAccessor) { 
     var css = valueAccessor(); 

     ko.utils.registerEventHandler(element, "mouseover", function() { 
      ko.utils.toggleDomNodeCssClass(element, ko.utils.unwrapObservable(css), true); 
     }); 

     ko.utils.registerEventHandler(element, "mouseout", function() { 
      ko.utils.toggleDomNodeCssClass(element, ko.utils.unwrapObservable(css), false); 
     });  
    } 
}; 

var Item = function(name) { 
    this.name = ko.observable(name); 
}; 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one"), 
     new Item("two"), 
     new Item("three") 
    ]) 
}; 

ko.applyBindings(viewModel); 

Bạn thậm chí có thể trở nên phức tạp hơn và có nó làm việc trong một thời trang giao như on bằng cách đặt các ràng buộc ở mức cao hơn và áp dụng chuyển đổi dựa trên một selector. Theo một quy tắc chung, tôi nghĩ rằng đó là tùy thuộc vào nhà phát triển cho dù họ muốn sử dụng dây lên mã hoặc làm điều đó một cách khai báo khi chức năng không yêu cầu dữ liệu từ mô hình khung nhìn. Trong trường hợp của bạn, có thể đủ tốt để gắn bó với on cho đến khi yêu cầu dữ liệu từ mô hình chế độ xem của bạn.