2012-04-12 86 views
55

最近我已經分離出ViewModel到一個單獨的JavaScript文件。擊倒擊發點擊綁定上applyBindings

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時,整個工作都很好。

回答

78

原因是,您的確在調用預覽功能(因爲編寫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: function(path) { 
    return function() { 
     // ... 
    } 
} 
+7

花了一分鐘得到這個答案。我需要澄清:這是因爲你用'()'調用'Report.preview',它執行調用而不是返回函數指針。沒有括號,它會按預期工作。 – Peter 2013-10-01 07:37:06

21

另一種解決方案是使用「綁定」構建:

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

,其中第一參數bind()將成爲被調用函數中的'this'。