Kích hoạt loại bỏ nhấp chuột liên kết trên applyBindings

Question

Gần đây tôi đã tách ViewModel thành một tệp JavaScript riêng biệt.

var Report = (function($) { 
    var initialData = []; 
    var viewModel = { 
     reports: ko.observableArray(initialData), 
     preview: function(path) { 
      // preview report 
     }, 
     otherFunctions: function() {} 
    }; 
    return viewModel; 
})(jQuery);​ 

Đây là HTML và Knockout mã liên quan

<script type="text/javascript" src="path/to/report/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     ko.applyBindings(Report, document.body); 
    }); 
</script> 

giao diện người dùng HTML có một nút trên đó nhấp chuột là dữ liệu ràng buộc để chức năng xem trước trong mô hình xem

<input type="button" name="Preview" id="Preview" class="btnPreview" 
    data-bind="click: Report.preview('url/to/report')" /> 

Vấn đề phương thức xem trước được gọi khi dòng sau thực hiện bằng hàm $ (document) .ready()

ko.applyBindings(Report, document.body); 

Điều đó là không có người dùng nhấp vào chức năng xem trước nút Xem trước được kích hoạt. Điều gì có thể là lý do cho hành vi này? Toàn bộ nội dung đã hoạt động tốt khi tôi xem JavaScript mô hình trong chính trang HTML.

Answer 1

Lý do là, bạn thực sự gọi hàm xem trước (vì viết functionName có nghĩa là tham chiếu đến hàm, viết functionName() có nghĩa là gọi nó).

Vì vậy, data-bind="click: Report.preview" sẽ hoạt động như mong đợi, nhưng không bàn giao thông số.

Như the manual bang (về một chủ đề khác nhau, nhưng điều này vẫn được áp dụng):

Nếu bạn cần phải vượt qua nhiều tham số, một trong những cách để làm điều đó là bằng cách gói xử lý của bạn trong một hàm nghĩa đen mà mất trong một tham số, như trong ví dụ này:

<button data-bind="click: function(data, event) { myFunction(data, event, 'param1', 'param2') }"> 
    Click me 
</button> 

hoặc trong trường hợp của bạn:

data-bind="click: function() { Report.preview('url/to/report') }" 

giải pháp sẽ được đưa bản xem trước() trả về một hàm (khá nhiều điều tương tự trên thực tế):

preview: function(path) { 
    return function() { 
     // ... 
    } 
} 

Answer 2

Một giải pháp khác là sử dụng 'ràng buộc' xây dựng:

data-bind="click: Report.preview.bind($data, 'url/to/report')" 

nơi đầu tiên tham số để bind() sẽ trở thành 'this' trong hàm được gọi.