Ractive 部分外部文件

Question

我正在尝试使用 Ractive 构建一个非常复杂的网页，
它包含许多部分模板。
我正在尝试从单独的文件中加载部分内容，以保持我的代码干净。

例子：

<script id='content' type='text/ractive'>
 Hello!
</script>

http://jsfiddle.net/efrsmqhd/

如何将“内容”放入单独的文件中？

Answer 1

当 Ractive 试图找到一个部分 - 比如说{{>foo}} - 它首先寻找ractive.partials.foo。然后它会寻找ractive.partials[valueOfFoo] - 所以如果ractive.get('foo') === 'bar'，它会寻找ractive.partials.bar。

只有当它们失败时，它才会寻找<script id='foo'>。所以你可以明确地传递你的部分，像这样：

var ractive = new Ractive({
  el: 'main',
  template: '{{>foo}}',
  partials: {
    foo: '<p>this is a <strong>foo</strong> partial</p>'
  }
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>

ractive.partials 的原型是Ractive.partials，所以如果页面上有多个 Ractive 实例，它们可以像这样共享部分：

Ractive.partials.foo = '<p>this is a <strong>foo</strong> partial</p>';

var ractive = new Ractive({
  el: 'main',
  template: '{{>foo}}'
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>

因此，将您的部分保存在单独的文件中就像通过 AJAX 加载它们并在您调用 new Ractive() 时传递它们一样简单。当然，如果你有很多单独的文件，那就更麻烦了，因为你必须在之前全部加载它们，你可以调用new Ractive()。有多种方法可以协调所有异步活动，但最简单的方法是使用 Promises - 这是一个使用 window.fetch polyfill 的示例：

var ractive, partials = {}, promises;

promises = [ 'foo', 'bar', 'baz' ].map( function ( name ) {
  return fetch( 'templates/' + name + '.html' ).then( function ( response ) {
    return response.text().then(function(text) {
      partials[ name ] = text;
    });
  });
});

Promise.all( promises ).then( function () {
  ractive = new Ractive({
    el: 'body',
    template: '#template',
    partials: partials
  });
});

Answer 2

感谢 Rich - 这正是我一直在寻找的。以前没见过fetch。但是，我没有收到获取的 html 正文。相反，我收到了一些看起来很奇怪的嵌套对象*，其中包含一个名为 [[PromisesValue]] 的键上的 html。所以我稍微重构了一下。

这将返回 response.text，然后将其放入部分中。我现在将所有模板（到目前为止大约 30 个）放在单独的文件中：D

 promises = [  'foo' , 'bar' ,'baz' ].map( function ( name ) {
      return fetch( 'templates/' + name + '.html' ).then( function ( response ) {
         return response.text()
      }).then(function(body) {
        partials[name] = body;
      });
    });


    Promise.all( promises ).then( function () { ...

*在 Chrome 调试器中看起来很奇怪。我的下一项工作是研究活性组件 :)