以需求爲例

Question

嘿，我一直在學習RactiveJS，並且非常喜歡它。我想與RequireJS一起使用它，並發現這個： ​​

但是，它不顯示html模板或任何代碼如何實現。這是我迄今爲止最好的：

(function() { 
    requirejs.config({ 
     baseUrl: 'js', 
    }); 

    require(['alerter', 'Ractive'], function (alerter, Ractive) { 
     alerter.showMessage(); 

     Ractive = new Ractive({ 
      el: 'container', 
      template: "{{greeting}} {{recipient}}!", 
      data: { 
       'greeting': alerter.showMessage(), 
       'recipient': 'mike' 
      } 
     }); 
    }); 
})(); 

所以上面的代碼工作，但你必須明確地把模板作爲你想要的代碼位。

有沒有在上面的鏈接代碼的工作示例？或者另一個示例顯示如何使用require與ractive，但不必硬編碼模板對象中的鬍鬚。

感謝您的幫助。

Answer 1

與require.js您可以使用「文本」插件從項目頁面加載文本內容：

require(['text!path/to/your/template.txt'], function (tmpl) { 
    ... 
    Ractive = new Ractive({ 
     el: 'container', 
     template: tmpl, 
     data: { 
      'greeting': alerter.showMessage(), 
      'recipient': 'mike' 
     } 
    }); 
}); 

希望這會有所幫助，祝你好運

Answer 2

編輯 - 現在有一個樣本Ractive + RequireJS應用程序https://github.com/RactiveJS/requirejs-ractive/tree/master/sample

Vanhelgen的回答是正確的 - 文本插件（download from here）允許你require任何資源，而不僅僅是AMD模塊.js文件，它允許您將模板保存在單獨的文件中。

所以在wiki頁面的第二個示例塊中，代碼塊的templates/main.html文件的內容可用作變量mainTemplate。

更進一步，您可以使用Ractive loader plugin以及文本插件，並且html文件的內容將預先包含Ractive的解析器。 （這是唯一真正值得如果你使用的RequireJS optimiser在部署應用前，捆綁一切都變成一個單一的文件做。）

順便說一句，最好不要覆蓋變量像Ractive，因爲這可能會導致一些硬盤要調試的情況。約定是爲實例使用小寫變量名，所以ractive = new Ractive(...)而不是Ractive = new Ractive(...)。