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