Spacebars {{#each}}如何工作？

我不明白Spacebars {{#each}}模板標籤會發生什麼情況。
比如我有一個簡單的事件代碼：Spacebars {{#each}}如何工作？

'click #player': function(){ 
    var playerId = this._id; 
    Session.set('selectedPlayer', playerId); 
    Session.set('selectedPlayerName', this.name); 
}

而且在模板此相應的代碼：

{{#each player}} 
    <a href="#" id="player" class="{{selectedClass}}"></a> 
{{/each}}

最後這個助手：

'selectedClass': function(){ 
    return this._id 
}

如何事件處理程序並且幫助函數知道哪個列表項正在被引用？

來源

2015-06-21 Федор Усаков

由此產生的HTML無效，因爲多個元素具有相同的id屬性。事件處理程序很容易解釋。 event-map中的密鑰分爲event-type和可選的event-target。將event-target傳遞給jQuery，它容忍id的無效使用。所以jQuery將事件監聽器添加到ID爲player的所有元素。

Matt K explained the rest pretty well.

來源

2015-06-21 13:18:51 Kriegslustig

謝謝！這解釋了一切。感謝您注意到這個錯誤。 –

在Meteor中，您已經獲得了您創建的所有模板。每次渲染模板時，都會給它一個數據上下文，這是一種說法，它創建了一個新的功能範圍。該數據上下文存儲在templateInstance().data中。

當你使用#each時，你爲裏面的東西創建一個新的數據上下文。你可以通過在你的幫手上面放一個console.log(this)來查看。

在onCreated，onDestroyed和onRendered，this指向templateInstace()。所以，無論何時你在回調中，使用this.data來訪問數據上下文。

在events回調中，您有2個參數：event, template。這裏，template也指向templateInstance()。

在幫手中，this指向templateInstance().data，所以你只需要撥打this。

Spacebars並不神奇，它只是一種讓JS看起來像HTML的方法。假設您的模板存儲在views/templates.html中，請查看.meteor/local/build/programs/web.browser/app/client/views/template.templates.html，這一切都有意義。

來源

2015-06-21 13:14:31

非常感謝！我在OS X上安裝了流星。它看起來像我有不同的文件夾結構。〜/ .meteor /中只有/ packages /和/ packages-metadata /中沒有/ local子文件夾。請諮詢我在哪裏可以找到.meteor/local/build/programs/web.browser/app/client/views/template.templates.html？ –

對不起。我已經知道了這一點。 –

The {{#each}} template tag是特殊的，它改變了它的內部環境。
實際上，每個模板都可以與一包數據一起使用（例如帖子的標題和內容）。這個數據包在模板的自己的上下文中註冊，並且可以在助手中通過this.someData或通過簡單地將其命名爲模板（{{someData}}）來引用。

其他模板標記（如{{#if}}）不會更改其中的模板上下文。您可以鍵入接收一個博客帖子對象數據的博客文章模板中：

<h3>{{title}}</h3> 
<p>{{content}}</p> 

{{#if userIsSecretAgent}} 
    <blink>{{secretData}}</blink> 
{{/if}}

_{（的祕密是，你必須以相同的頻率閃爍的文字能夠閱讀它，這就是爲什麼用於這種低級長的時間）}

{{#each}}允許將模板的內上下文改變到迭代的當前對象，因此簡單地訪問對象的你迭代內容該標籤的上。
比方說，你想讓它顯示博客文章列表的博客文章模板：

{{#each blogPosts}} 
    <!-- Here, how do you gain access to each title, each content, ..? --> 
    <!-- Well, the context has changed! --> 
    <!-- Now we can directly access each datum of the iterable through the context --> 

    <!-- The result simply becomes: --> 
    <h3>{{title}}</h3> 
    <p>{{content}}</p> 

    {{#if userIsSecretAgent}} 
    <blink>{{secretData}}</blink> 
    {{/if}} 
{{/each}}

內{{#each}}塊不是一樣的父母，而是作爲一個博客文章中，我們可以在上下文只需用他們的名字引用每個博客文章字段！

但是現在我們正在重複代碼。重用我們以前的模板不是很好嗎？

{{#each blogPosts}} 
    {{> blogPost}} 
{{/each}}

的blogPost模板需要一個博客帖子對象作爲它的背景下，我們提供這個上下文中有{{#each}}模板標籤。

幫助者以相同的方式工作，除了你必須在其中鍵入this.title或this.content。您還必須使用Template.instance()在某些地方參考模板（而不是this）。

查看SpaceBars docs瞭解更多魔法。

來源

2015-06-21 13:18:42

Spacebars {{#each}}如何工作？

回答

相關問題