Javascript 敲除在 applyBindings 上触发点击绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10119767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout firing click binding on applyBindings
提问by Raj
Recently I've separated out ViewModel to a separate JavaScript file.
最近我将 ViewModel 分离到一个单独的 JavaScript 文件中。
var Report = (function($) {
var initialData = [];
var viewModel = {
reports: ko.observableArray(initialData),
preview: function(path) {
// preview report
},
otherFunctions: function() {}
};
return viewModel;
})(jQuery);?
Here is the HTML and Knockout related code
这是 HTML 和 Knockout 相关的代码
<script type="text/javascript" src="path/to/report/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(Report, document.body);
});
</script>
HTML user interface has a button on which click is data bind to preview function in the view model
HTML 用户界面有一个按钮，单击该按钮是数据绑定到视图模型中的预览功能
<input type="button" name="Preview" id="Preview" class="btnPreview"
data-bind="click: Report.preview('url/to/report')" />
Problempreview method is called when the following line execute in $(document).ready() function
在 $(document).ready() 函数中执行以下行时调用问题预览方法
ko.applyBindings(Report, document.body);
That is without user clicking on the Preview button preview function is fired. What could be the reason for this behavior? The whole stuff was working fine when I'd view model JavaScript in the HTML page itself.
即没有用户点击预览按钮预览功能被触发。这种行为的原因是什么？当我在 HTML 页面本身中查看模型 JavaScript 时，整个工作正常。
回答by Niko
The reason is, that you're indeed invoking the preview function (because writing functionNamemeans referring to the function, writing functionName()means calling it).
原因是，您确实在调用预览函数（因为写作functionName意味着引用该函数，而写作functionName()意味着调用它）。
So data-bind="click: Report.preview"would be working as expected, but without handing over the parameter.
所以data-bind="click: Report.preview"会按预期工作，但不移交参数。
As the manualstates (on a different topic, but this still applies):
正如手册所述（关于不同的主题，但这仍然适用）：
If you need to pass more parameters, one way to do it is by wrapping your handler in a function literal that takes in a parameter, as in this example:
如果需要传递更多参数，一种方法是将处理程序包装在接受参数的函数文字中，如下例所示：
<button data-bind="click: function(data, event) { myFunction(data, event, 'param1', 'param2') }">
Click me
</button>
or in your case:
或者在你的情况下：
data-bind="click: function() { Report.preview('url/to/report') }"
Another solution would be to make preview() return a function (pretty much the same thing actually):
另一种解决方案是使 preview() 返回一个函数（实际上几乎相同）：
preview: function(path) {
return function() {
// ...
}
}
回答by Remco Ros
Another solution is to use 'bind' construct:
另一种解决方案是使用“绑定”构造：
data-bind="click: Report.preview.bind($data, 'url/to/report')"
where the first parameter to bind() will become the 'this' in the called function.
其中 bind() 的第一个参数将成为被调用函数中的“this”。
