61

最近、ViewModelを別のJavaScriptファイルに分離しました。

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

HTMLとノックアウトに関連するコードは次のとおりです

<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（）関数で次の行が実行されると、問題プレビューメソッドが呼び出されます。

ko.applyBindings(Report, document.body);

つまり、ユーザーが[プレビュー]ボタンをクリックしなくても、プレビュー機能が実行されます。この動作の理由は何でしょうか？HTMLページ自体でモデルJavaScriptを表示すると、すべてが正常に機能していました。

4

2 に答える 2

87

その理由は、実際にプレビュー関数を呼び出しているからです (書き込みfunctionNameは関数を参照することを意味し、書き込みは関数をfunctionName()呼び出すことを意味するため)。

したがってdata-bind="click: Report.preview"、期待どおりに機能しますが、パラメーターを引き渡すことはありません。

マニュアルに記載されているように（別のトピックについてですが、これは引き続き適用されます）：

より多くのパラメーターを渡す必要がある場合は、次の例のように、パラメーターを受け取る関数リテラルでハンドラーをラップする方法があります。

<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() {
        // ...
    }
}
于 2012-04-12T08:18:38.480 に答える
24

別の解決策は、'bind' コンストラクトを使用することです。

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

bind() の最初のパラメーターは、呼び出された関数の「this」になります。

于 2012-10-05T12:33:42.053 に答える