使用的onclick或點擊與KnockoutJS綁定經過參數

Question

我有這樣的功能：

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

我用普通的JavaScript和HTML做到這一點：

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

我怎麼可以這樣使用習慣做knockout.js？

Answer 1

如果在Knockout中設置了點擊綁定，則該事件作爲第二個參數傳遞。您可以使用該事件來獲取發生點擊的元素，並執行所需的任何操作。

下面是展示小提琴：http://jsfiddle.net/jearles/xSKyR/

或者，你可以創建自己的自定義綁定，這將接受它必將作爲第一個參數的元素。在init中，您可以附加您自己的單擊事件處理程序以執行您希望的任何操作。

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

用的結合，就像這個例子：

<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

我知道這是一個老問題，但這是我的貢獻。而不是所有這些技巧，你可以簡單地將一個函數包裝在另一個函數中。不

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

這裏是fiddle

Answer 4

如何處理click事件與KnockoutJS一個通用的答案...

直線上升問題的答案：就像我在這裏做正如問到的那樣，但可能對大多數Google員工登陸此處的問題的答案是：使用the click binding from KnockoutJS而不是onclick。就像這樣：

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>

---

**有關實際問題... * A注

的實際問題有一個有趣的一點：

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

不要那樣做！當使用像KnockoutJS這樣的MVVM框架時，不要像這樣修改DOM，特別是不要使用您自己的父級DOM。如果你將做到這一點，按鈕將消失（如果你替換你的父母的innerHTML你自己將永遠消失！）。

相反，修改視圖模型在你的處理器，而是和有查看響應。例如：

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

淘汰賽的文件還提到額外的傳遞參數，使用on-click使用function.bind這樣的結合結合功能更清潔的方式：

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