Đi qua tham số sử dụng onclick hoặc một nhấp chuột ràng buộc với KnockoutJS

Question

tôi có chức năng này:

function make(place) 
{ 
    place.innerHTML = "somthing" 
} 

tôi sử dụng để làm điều này với đồng bằng Javascript và html:

<button onclick="make(this.parent)">click me</button> 

Làm thế nào tôi có thể làm điều này bằng thành ngữ knockout.js?

Answer 1

Nếu bạn thiết lập liên kết nhấp chuột trong Knockout, sự kiện được chuyển thành tham số thứ hai. Bạn có thể sử dụng sự kiện để có được yếu tố mà nhấp chuột đã xảy ra và thực hiện bất kỳ hành động nào bạn muốn.

Đây là một fiddle đó chứng tỏ: http://jsfiddle.net/jearles/xSKyR/

Ngoài ra, bạn có thể tạo riêng của bạn ràng buộc, mà sẽ nhận được các yếu tố đó là ràng buộc để làm tham số đầu tiên. Trên init, bạn có thể đính kèm trình xử lý sự kiện nhấn của riêng bạn để thực hiện bất kỳ hành động nào bạn muốn.

http://knockoutjs.com/documentation/custom-bindings.html

HTML

<div> 
    <button data-bind="click: clickMe">Click Me!</button> 
</div> 

Js

var ViewModel = function() { 
    var self = this; 
    self.clickMe = function(data,event) { 

     var target = event.target || event.srcElement; 

     if (target.nodeType == 3) // defeat Safari bug 
     target = target.parentNode; 

     target.parentNode.innerHTML = "something"; 
    } 
} 

ko.applyBindings(new ViewModel()); 

Answer 2

Sử dụng một ràng buộc, như trong ví dụ này:

<a href="#new-search" data-bind="click:SearchManager.bind($data,'1')"> 
    Search Manager 
</a> 

var ViewModelStructure = function() { 
    var self = this; 
    this.SearchManager = function (search) { 
     console.log(search); 
    }; 
}(); 

Answer 3

Tôi biết đây là một câu hỏi cũ, nhưng đây là sự đóng góp của tôi. Thay vì tất cả các thủ thuật này, bạn có thể chỉ cần bọc một hàm bên trong một hàm khác. Giống như tôi đã làm ở đây:

<div data-bind="click: function(){ f('hello parameter'); }">Click me once</div> 
<div data-bind="click: function(){ f('no no parameter'); }">Click me twice</div> 

var VM = function(){ 
    this.f = function(param){ 
    console.log(param); 
    } 
} 
ko.applyBindings(new VM()); 

Và đây là fiddle

Answer 4

Một câu trả lời chung chung về cách xử lý click sự kiện với KnockoutJS ...

Không phải là một câu trả lời thẳng lên cho câu hỏi như được hỏi, nhưng có thể là câu trả lời cho câu hỏi mà hầu hết người của Google đến đây đều có: sử dụng the click binding from KnockoutJS thay vì onclick. Như thế này:

function Item(parent, txt) { 
 
    var self = this; 
 
    
 
    self.doStuff = function(data, event) { 
 
    console.log(data, event); 
 
    parent.log(parent.log() + "\n data = " + ko.toJSON(data)); 
 
    }; 
 
    
 
    self.doOtherStuff = function(customParam, data, event) { 
 
    console.log(data, event); 
 
    parent.log(parent.log() + "\n data = " + ko.toJSON(data) + ", customParam = " + customParam); 
 
    }; 
 
    
 
    self.txt = ko.observable(txt); 
 
} 
 

 
function RootVm(items) { 
 
    var self = this; 
 
    
 
    self.doParentStuff = function(data, event) { 
 
    console.log(data, event); 
 
    self.log(self.log() + "\n data = " + ko.toJSON(data)); 
 
    }; 
 
    
 
    self.items = ko.observableArray([ 
 
    new Item(self, "John Doe"), 
 
    new Item(self, "Marcus Aurelius") 
 
    ]); 
 
    self.log = ko.observable("Started logging..."); 
 
} 
 

 
ko.applyBindings(new RootVm());

.parent { background: rgba(150, 150, 200, 0.5); padding: 2px; margin: 5px; } 
 
button { margin: 2px 0; font-family: consolas; font-size: 11px; } 
 
pre { background: #eee; border: 1px solid #ccc; padding: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: items"> 
 
    <div class="parent"> 
 
    <span data-bind="text: txt"></span><br> 
 
    <button data-bind="click: doStuff">click: doStuff</button><br> 
 
    <button data-bind="click: $parent.doParentStuff">click: $parent.doParentStuff</button><br> 
 
    <button data-bind="click: $root.doParentStuff">click: $root.doParentStuff</button><br> 
 
    <button data-bind="click: function(data, event) { $parent.log($parent.log() + '\n data = ' + ko.toJSON(data)); }">click: function(data, event) { $parent.log($parent.log() + '\n data = ' + ko.toJSON(data)); }</button><br> 
 
    <button data-bind="click: doOtherStuff.bind($data, 'test 123')">click: doOtherStuff.bind($data, 'test 123')</button><br> 
 
    <button data-bind="click: function(data, event) { doOtherStuff('test 123', $data, event); }">click: function(data, event) { doOtherStuff($data, 'test 123', event); }</button><br> 
 
    </div> 
 
</div> 
 

 
Click log: 
 
<pre data-bind="text: log"></pre>

---

** Lưu ý về thực tế câu hỏi ... *

Câu hỏi thực tế có một chút thú vị:

// Uh oh! Modifying the DOM.... 
place.innerHTML = "somthing" 

Đừng làm vậy! Không sửa đổi DOM như vậy khi sử dụng khung MVVM như KnockoutJS, đặc biệt không phải là phần của DOM là cha mẹ của riêng bạn. Nếu bạn sẽ thực hiện việc này, nút này sẽ biến mất (nếu bạn thay thế số innerHTML của cha mẹ mình thì bạn sẽ không bao giờ tồn tại mãi mãi!).

Thay vào đó, hãy sửa đổi Xem mô hình trong trình xử lý của bạn thay thế và có Chế độ xem phản hồi. Ví dụ:

function RootVm() { 
 
    var self = this; 
 
    self.buttonWasClickedOnce = ko.observable(false); 
 
    self.toggle = function(data, event) { 
 
    self.buttonWasClickedOnce(!self.buttonWasClickedOnce()); 
 
    }; 
 
} 
 

 
ko.applyBindings(new RootVm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div> 
 
    <div data-bind="visible: !buttonWasClickedOnce()"> 
 
    <button data-bind="click: toggle">Toggle!</button> 
 
    </div> 
 
    <div data-bind="visible: buttonWasClickedOnce"> 
 
    Can be made visible with toggle... 
 
    <button data-bind="click: toggle">Untoggle!</button> 
 
    </div> 
 
</div>

Answer 5

tài liệu Knockout cũng đề cập đến một cách sạch hơn nhiều thông qua các tham số thêm vào các chức năng ràng buộc sử dụng một on-click ràng buộc sử dụng function.bind như thế này:

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')"> 
    Click me 
</button>