javascript - 在 applyBindings 上敲击触发点击绑定(bind)

Question

最近我将 ViewModel 分离到一个单独的 JavaScript 文件中。

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

这里是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 用户界面有一个按钮，单击该按钮可以数据绑定(bind)到 View 模型中的预览功能

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

问题 在 $(document).ready() 函数中执行以下行时调用预览方法

ko.applyBindings(Report, document.body); 

也就是说，没有用户点击预览按钮预览功能被触发。这种行为的原因可能是什么？当我在 HTML 页面本身中查看模型 JavaScript 时，一切都运行良好。

Answer 1

原因是，您确实在调用预览函数(因为编写 functionName 表示引用该函数，编写 functionName() 表示调用它)。

所以 data-bind="click: Report.preview" 会按预期工作，但不会传递参数。

作为the manual状态(关于不同的主题，但这仍然适用):

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>

或者在你的情况下:

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

另一个解决方案是让 preview() 返回一个函数(实际上几乎是一样的):

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