KnockOutJs：为什么单击数据绑定已执行元素加载？答案

【问题标题】：KnockOutJs: Why does click data-bind has execute on-load of element?KnockOutJs：为什么单击数据绑定已执行元素加载？
【发布时间】：2013-10-17 01:20:44
【问题描述】：

我有一个通过 php 生成的锚链接，它将绑定在 ko 上并且可以正常工作。我的问题是为什么 ko 函数在加载元素时执行？下面是生成的代码。

html:

<a data-bind="click: addOrderedProducts(11,"CRM130930001","Cream",0.00,0,0,0)" class="Add" title="Add" href="">Add</a>

ko 函数：

self.addOrderedProducts = function (id,product_number,name,price,quantity,discount,balance){
    self.orderedProducts.push(new Product(id,product_number,name,price,quantity,discount,balance));
};

请帮助我...在此先感谢 :)

【问题讨论】：

标签： jquery knockout.js

【解决方案1】：

这就是对象字面量在 Javascript 中的工作方式，因此函数类等属性值会在对象创建时立即进行评估。

要使其正常工作，您需要将 click 绑定中的函数调用包装到匿名函数中：

<a data-bind="click: function () { addOrderedProducts( ... ) }" href="">Add</a>

另请参阅文档：Accessing the event object, or passing more parameters

【讨论】：

@nemesv 内联这样的函数对内存有什么作用 - 您是否有可能发生内存泄漏或垃圾回收延迟？
@DavidRobbins 重点是click 采用函数引用，因此无论它是内联定义还是在您的视图模型上定义都没有关系。如果您在处理程序函数中没有做任何坏事（这会阻止它被 GC），那么当从 DOM 中删除元素时，它会被垃圾收集。

【解决方案2】：

或者，您可以使用...click: addOrderedProducts.bind($data,...)，我认为它稍微干净一些（尽管这在某种程度上是个人喜好问题）。

bind 是 function 对象的 ES5 方法（Knockout 将它用于非 ES5 浏览器），它返回一个新的匿名函数，当被调用时，它将从bind 的第一个参数及其前几个参数来自传递给bind 的任何其他参数）。

顺便说一句（虽然这里没有人这样做）值得一提的是，从来没有必要写这样的东西：

functionWithCallback(..., function(data) {
  someOtherFunction(data);
});

你可以直接写

functionWithCallback(..., someOtherFunction);

函数的名称是作为匿名函数表达式的函数引用；没有必要为了得到一个而编写后者（当然，如果回调涉及的代码多于单个函数调用，则您确实需要一个匿名函数）。

【讨论】：

【解决方案3】：

来自官方documentation：

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

【讨论】：