自定義for循環幫手EmberJS/HandlebarsJS

Question

一個小型的兩小時前我開始：Nested HandlebarsJS #each helpers with EmberJS not working

後不久，我想出一個可以接受治標不治本自己，問題仍然是unaswered。雖然我的問題並沒有停止。

我現在試圖做一個自定義幫手，它將循環訪問一個對象數組，但排除第一個索引 - 非常多：for(i = 1; i < length; i++) {}。我已經在網站上閱讀過，您必須獲取上下文的長度並將其傳遞給選項 - 考慮您的功能如下所示：forLoop(context, options)。

但是，上下文是一個字符串而不是實際的對象。當你做一個.length時，你會得到字符串的長度，而不是數組的大小。當我將它傳遞給選項時，沒有任何反應 - 不會提到瀏覽器凍結。

然後，我首先嚐試做一個getPath之前傳遞給選項，這將返回一個空字符串。

我該怎麼做，而不是我剛剛爲HandlebarsJS做了for-loop代碼，而且工作正常，但EmberJS似乎沒有采取，爲什麼？

編輯：我幾乎也跟着：http://handlebarsjs.com/block_helpers.html - >簡單迭代

Answer 1

我解決了這個自己努力了很長時間。

（如在網站上描述）的HandlebarsJS方法是不爲EmberJS不再有效，它現在如下：

function forLoop(context, options) { 
    var object = Ember.getPath(options.contexts[0], context); 
    var startIndex = options.hash.start || 0; 

    for(i = startIndex; i < object.length; i++) { 
     options(object[i]); 
    } 
} 

哎呀，你甚至可以延長for循環到包括指標值！

function forLoop(context, options) { 
    var object = Ember.getPath(options.contexts[0], context); 
    var startIndex = options.hash.start || 0; 

    for(i = startIndex; i < object.length; i++) { 
     object[i].index = i; 

     options(object[i]); 
    } 
} 

這是一個帶變量起始索引的工作循環。你在你的模板中使用它像這樣：

{{#for anArray start=1}} 
    <p>Item #{{unbound index}}</p> 
{{/for}} 

Answer 2

這裏是我是如何做到的（和它的作品！）

首先， 我在我的模型中的「預覽」屬性/功能，剛剛返回arrayController在數組中：

objectToLoop = Ember.Object.extend({ 
     ... 
    arrayController: [], 
    preview: function() { 
     return this.get('arrayController').toArray(); 
    }.property('arrayController.@each'), 
     ... 
}); 

然後，我添加了一個新的把手幫手：

Handlebars.registerHelper("for", function forLoop(arrayToLoop, options) { 
    var data = Ember.Handlebars.get(this, arrayToLoop, options.fn); 

    if (data.length == 0) { 
     return 'Chargement...'; 
    } 

    filtered = data.slice(options.hash.start || 0, options.hash.end || data.length); 

    var ret = ""; 
    for(var i=0; i< filtered.length; i++) { 
     ret = ret + options.fn(filtered[i]); 
    } 
    return ret;  
}); 

並感謝所有這些魔術，我可以在我看來稱之爲：

<script type="text/x-handlebars"> 
    <ul> 
     {{#bind objectToLoop.preview}} 
      {{#for this end=4}} 
       <li>{{{someProperty}}}</li> 
      {{/for}} 
     {{/bind}} 
    </ul> 
</script> 

就是這樣。

我知道這不是最優的，所以無論誰想法如何改進它，請讓我知道:)