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'>。所以你可以明确地传递你的部分内容，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

因此，将部分文件保存在单独的文件中与通过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 - 这正是我一直在寻找的。之前没见过。但是，我没有收到提取的html正文。相反，我收到了一些奇怪的嵌套对象*，其中包含名为[[PromisesValue]]的键上的html。所以我稍微重构了一些东西。

返回response.text，然后将其放到partials上。我现在将所有模板（目前大约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 () { ...

*在Chromes调试器中看起来很奇怪。我的下一个工作是修复ractive组件：）

Ractive部分外部文件

2 个答案: