Handlebars.js - 每個和getter

Question

我正在使用Handlebars.js，並陷入了一個我無法解決的問題。

我想遍歷模板中的數組，但問題是我用於迭代器的表達式是一個getter而不是數組。

一段代碼說明該問題是下列之一：

HTML：

<script id="template" type="text/x-handlebars"> 
    Accessing directly: {{array}} <br/> 
    Accessing by getter: {{getArray}} <br/> 

    <br/> 

    Looping directly: 
    <ul> 
    {{#each array}} 
     <li>{{this}}</li> 
    {{/each}} 
    </ul> 

    <br/> 

    Looping by getter: 
    <ul> 
    {{#each getArray}} 
     <li>{{this}}</li> 
    {{/each}} 
    </ul> 
</script> 

<p id="content"></p> 

JS：

var template = Handlebars.compile($("#template").html()); 
var element = { 
    array: [0, 1, 2], 

    getArray: function() { 
     return this.array; 
    } 
}; 

$("#content").html(template(element)); 

的問題是，使用該吸氣劑的each確實沒有。這可以在這個jsFiddle中看到。

是否有任何干淨的方式來執行此使用getter，或者我應該寫一個助手或類似的輔助功能？

謝謝！

Answer 1

{{#each}}需要一個數組，它不會理解其他任何東西。你可以添加對這個簡單的自定義幫手，你只需要記住使用fn.call(this)，如果你希望這樣的：

getArray: function() { 
    return this.array; 
} 

有正確的this。像這樣的東西可能會做的伎倆：

Handlebars.registerHelper('smart_each', function(a, block) { 
    if(typeof a == 'function') 
     a = a.call(this); 
    var s = ''; 
    for(var i = 0; i < a.length; ++i) 
     s += block(a[i]); 
    return s; 
}); 

演示：http://jsfiddle.net/ambiguous/yuPfD/

你可能想看看在車把源{{#each}}實施美化，高達一點，但我會離開，作爲一個行使。

Answer 2

如果您使用proper JavaScript getters，您的技術將工作。這裏有一個使用ES6中的類的例子。有關以下代碼的ES5示例，請參閱this version which uses babel.io's repl。

'use strict' 

const handlebars = require('handlebars') 
const template = "{{#each letters}} {{this}} {{/each}}" 
var context 

class Alphabet { 
    get letters() { 
    return 'abc'.split('') 
    } 
} 

context = new Alphabet() 
console.log('class instance with getter methods:') 
console.log(handlebars.compile(template)(context)) 


context = { 
    letters: 'xyz'.split('') 
} 

console.log('regular object:') 
console.log(handlebars.compile(template)(context)) 

輸出：

❯ node index.js 
class instance with getter methods: 
a b c 
regular object: 
x y z