首页 文章

Knockout在applyBindings上触发点击绑定

提问于
浏览 次
58

最近我将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用户界面有一个按钮，在该按钮上，数据绑定到视图模型中的预览功能

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

当$（document）.ready（）函数中的以下行执行时，将调用 Problem 预览方法

ko.applyBindings(Report, document.body);

即没有用户点击预览按钮预览功能就会被触发 . 这种行为可能是什么原因？当我在HTML页面中查看模型JavaScript时，整个工作正常 .

javascript knockout.js

2 回答

  • 22

    原因是，你确实正在调用预览函数（因为写 functionName 意味着引用该函数，写 functionName() 意味着调用它） .

    因此 data-bind="click: Report.preview" 将按预期工作，但不会移交参数 .

    作为the manual状态（在不同的主题上，但这仍然适用）：

    如果需要传递更多参数，一种方法是将处理程序包装在一个接受参数的函数文本中，如下例所示：

    <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() {
        // ...
    }
}
    回复于
  • 83

    另一种解决方案是使用'bind'结构：

    data-bind="click: Report.preview.bind($data, 'url/to/report')"

    其中bind（）的第一个参数将成为被调用函数中的'this' .

    回复于

相关问题