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'
            }
        });
    });
})();

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

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

感谢您的帮助。

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的答案是正确的 - 文本插件（download from here）允许您require任何资源，而不仅仅是.js文件中的AMD模块，它允许您将模板保存在单独的文件中。

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

更进一步，您可以在文本插件旁边使用Ractive loader plugin，并且将使用Ractive的解析器预先准备html文件的内容。（如果您在部署应用程序之前使用RequireJS optimiser将所有内容捆绑到一个文件中，那么这是非常值得的。）

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

Ractive with Require示例

2 个答案: