示例

Question

嘿，到目前为止，我一直在学习RactiveJS，我真的很喜欢它。我想将它与RequireJS一起使用，并发现了以下内容：https://github.com/Rich-Harris/Ractive/wiki/Using-Ractive-with-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'
            }
        });
    });
})();

所以上面的代码可以工作，但是你必须显式地把你想要的代码作为模板。

上面的链接中有代码的工作示例吗？或者另一个示例，演示如何使用，但不必硬编码模板对象中的胡子。

谢谢你的帮助。

Answer 1

使用require.js，您可以使用项目页面中的" text“插件加载文本内容：

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

希望这能帮上忙祝你好运

Answer 2

编辑-现在在https://github.com/RactiveJS/requirejs-ractive/tree/master/sample上有一个示例Ractive+RequireJS应用程序

Vanhelgen的答案是正确的-文本插件(从这里下载)允许您require任何资源，而不仅仅是.js文件中的.js模块，它允许您将模板保存在一个单独的文件中。

因此，在wiki页面的第二个示例块中，templates/main.html文件的内容可以作为变量mainTemplate提供给代码块。

更进一步，您可以在文本插件的同时使用Ractive插件，并且html文件的内容将由Ractive的解析器准备。(在部署应用程序之前，只有在使用RequireJS优化器将所有内容打包到一个文件中时，才真正值得这样做。)

顺便说一句，最好不要覆盖像Ractive这样的变量，因为它会导致一些难以调试的情况。约定是对实例使用小写变量名，因此使用ractive = new Ractive(...)而不是Ractive = new Ractive(...)。