活動部分外部文件

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

由於瑞奇 - 這正是我一直在尋找。之前沒有看到提取。但是，我沒有收到提取的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調試器中顯得很奇怪。我的下一個工作是饒有興趣的組件:)