1

嘿，我一直在学习 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'
            }
        });
    });
})();

所以上面的代码可以工作，但你必须明确地把你想要的代码位作为模板。

上面的链接中是否有代码的工作示例？或另一个示例，该示例显示如何将 require 与 ractive 一起使用，但不必在模板对象中硬编码胡须。

感谢您的帮助。

4

2 回答 2

3

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

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

希望这有帮助，祝你好运

于 2013-10-15T16:25:24.060 回答
1

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

Vanhelgen 的回答是正确的 - 文本插件（从此处下载）允许您访问require任何资源，而不仅仅是 .js 文件中的 AMD 模块，它允许您将模板保存在单独的文件中。

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

更进一步，您可以在文本插件旁边使用 Ractive 加载器插件，并且 html 文件的内容将使用 Ractive 的解析器进行预解析。（只有在部署应用程序之前使用RequireJS 优化器将所有内容捆绑到一个文件中时，才真正值得这样做。）

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

于 2013-10-15T21:30:33.207 回答