使用data-bind（knockout.js）加載requirejs模塊？

我想要做的是使用data-bind屬性加載js。我對requirejs和淘汰賽相當陌生，我不確定如何出去。使用data-bind（knockout.js）加載requirejs模塊？

現在我有我的js拆分成不同的需求模塊，用於每種類型的組件。例如，我有一個與頭部下拉交易文件（header.js）：

define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){ 
    var $menu = $(".menu"); 
    var $dropdown = $menu.find("ul"); 
    $menu.on("click", function() { 
     $dropdown.toggle("fast"); 
    }); 
};

我想要做的是：

<div class="header" data-bind="headerDropdown">...</div>

並加載相應的JS。

我的js模塊大部分都是基於點擊的UI變化（點擊時顯示並隱藏東西），但我只希望js加載的是html頁面在頁面上。

希望這是有道理的！

如何使用requirejs和knockout來做到這一點？

來源

2014-12-30 msn

這個問題的答案太大了。你的RequireJS模塊不返回任何東西，它必須返回一個對象或值。對於'data-bind =「單擊：headerDropDown」'這非常簡單：在您的viewModel中創建headerDropDown方法。你真的想'data-bind =「headerDropdown」'？然後你需要自定義綁定。 – Tyblitz

看起來像你在混合概念。首先，讓我們看到了定義（）的定義（假設該文件是headerDropdown.js）：

define('headerDropdown',['jquery', 'bootstrap']),function(jquery, bootstrap){ 
    var $menu = $(".menu"); 
    var $dropdown = $menu.find("ul"); 
    $menu.on("click", function() { 
     $dropdown.toggle("fast"); 
    }); 
};

Require.js不建議定義模塊expliciting他們的名字（ 'headerDropdown'）;你可以根據文件名得到名字。這是因爲require需要一個工具來優化生產中的javascript：您可以連接並最小化輸出JS。優化器使用文件名來定義模塊名稱。請避免用名稱來定義。
如果您查看代碼，您需要['jquery']，但在模塊定義內使用全局jQuery變量。這沒關係，因爲jQuery將它們的模塊定義爲全局變量，但約定是在函數中接收jQuery參考：

define（'headerDropdown'，['jquery'，'bootstrap']），function（$， bootstrap）
您正在定義一個模塊，它直接操縱DOM，這違背了挖空的DOM更新過程。在你的情況下，你使用的是data-bing =「headerDropwodn」，所以headerDropdown是一個bindingHandler而不是一個簡單的模塊。請檢查：http://knockoutjs.com/documentation/custom-bindings.html
您可以根據需要加載指示問題。你只需要改變你的代碼：
- 加載你的HTML app.js腳本（例如）。這app.js需要淘汰賽和你的headerDropdown bindingHandler。在函數聲明中，你定義了ko.applyBindings，這就是全部。

問候！

來源

2014-12-31 02:42:32 jparaya

使用data-bind（knockout.js）加載requirejs模塊？

回答

相關問題