如何將element參數傳遞給require.js定義調用？

我有一個頁面被拆分成動態加載的「widgets」 - 帶有require.js的JS，HTML &帶有自定義JS的CSS。這特別方便，因爲它允許每個小部件定義它自己的JS要求。如何將element參數傳遞給require.js定義調用？

例如：

define(['jquery', 'mustache'], function($, Mustache) { ...

然而，爲了定位的小窗口JS功能集成到正確的元素，我需要小部件根元素傳遞給javascript，裝載有require.js，這是一些require.js不支持...：/

我現在有是這樣的，在定義調用返回，做渲染的功能...

// Example.js 
define(['jquery'], function($) { 
    return function($el) { 
     // Render the widget here to "$el" 
     $el.html('asdsadads'); 
    } 
});

......這是由需要調用運行...

require(['js/example'], function(render) { render($el); });

...這與簡單的結構，但更復雜的部件工作正常，init函數開始膨脹，這使得其非常難閱讀（也更容易出現錯誤）。

最理想的情況是這樣的......

// Example.js 
define(['jquery'], function($) { 
    if() { // Check for route and/or other modifiers (is logged in etc) 
     $el.html('asdasdasd'); 
    } else { 
     $el.html('qwerty'); 
    } 

});

...這裏的實際功能是直接的定義調用中。不幸的是，據我所知，有沒有辦法通過與需要調用的元素，像這樣......

define(['jquery'], function($, $el) {

那麼，什麼是一個人做的？是否有一種模式可以用來以某種方式將元素乾淨地傳遞給定義調用？還是我不得不訴諸這個醜陋的回撥叢林？

來源

2014-03-24 crappish

就個人而言，我認爲你有模式更好。模塊應該是可執行的，不能執行。 –

那麼，我並不嚴格地反對上述模式，只要它可以做得更清潔。然而，問題在於$ el只在回調運行時才設置，所以幾乎所有的事情都需要由回調本身來執行。這使得它變得更加複雜和容易出錯。 – crappish

定義塊的想法是返回可用於代碼的另一部分的類或函數。這鼓勵和重複使用DRY模塊化編碼風格。

定義模塊在創建時意識到$ el是沒有意義的。有意義的是你返回一個被$ el實例化的類。通過這種方式，您的模塊可以重複使用，並將控制負擔返回給您的應用程序，而不是模塊本身。一個模塊及其使用

簡單的例子：

define(['jquery'], function($) { 
    var MyClass = function(args){ 
     this.initView(args.$el); 
    } 
    MyClass.prototype.initView($el){ 
     //init your view 
    } 
    return MyClass; 
});

然後，當你可以使用這個模塊是這樣的：

define(['path/to/myClass'], function(MyClass) { 
     var myView = new MyClass({$el: $('.my-selector')}), 
      myOtherView = new MyClass({$el: $('.my-other-selector')}); 
    });

來源

2014-03-24 14:45:58

如何將element參數傳遞給require.js定義調用？

回答

相關問題