設置流星JS助手的返回值，注入這種動態成模板

下面給出的答案，使用Meteor Deps似乎是理想的發揮，因爲我想兩個不同的模板之間共享數據，並應該對發生的任何變化產生反應。

澄清：我的數據來源是Template.reactiveTable，目的地是Template.buttons。當reactiveTable中的數據發生變化時，我希望按鈕反映這一點。

END EDIT

我尋找設置的buttons基於表（具體地，<h1>值）的含量的值。

buttons.html：

<template name="buttons"> 
    {{#each testButtons }} 
     <button id="{{ name }}">{{ name }}</button> 
    {{/each}} 
    </template>

利用這種硬編碼它按預期工作（兩個按鈕渲染標記Alice和Bob

UI.registerHelper('testButtons', function() { 
     return [ 
      { name: "Alice" }, 
      { name: "Bob" } 
     ] 
    } 
)

模板愉快地接受和呈現此陣列對象的。但是，不是當我動態地生成對象數組時

目標：爲我的h1標籤中包含的每個唯一的單詞生成一個按鈕（幾乎像一個博客標籤）。

通過替換我的幫手代碼與片段下面（使用jQuery解析<h1>標籤，生成數組發送到模板）。

假定HTML是：

<h1>foo</h1> 
    <h1>bar</h1> 
    <h1>baz</h1>

然後運行在控制檯以下片斷，如期望將創建uniqStrings = [ "foo", "bar", "baz"];。

$('h1').map(function() { 
    var words = []; 
    words.push($(this).text()); 
    uniqStrings = _.uniq(words); 

});

如何再發uniqStrings回到我的按鈕模板來呈現n= uniqStrings.length按鈕？謝謝！

來源

2014-08-28 DeBraid

假設這個網站：

<body> 
    <h1>Alice</h1> 
    <h1>Bob</h1> 
    {{> buttons}} 
</body> 

<template name="buttons"> 
    {{#each testButtons }} 
    <button id="{{ name }}">{{ name }}</button> 
    {{/each}} 
</template>

你可以得到它與這個執行工作：

Template.buttons.helpers({ 
    testButtons: function() { 
    var words = UI._templateInstance().state.get('words'); 
    return _.map(words, function(word) { 
     return {name: word}; 
    }); 
    } 
}); 

Template.buttons.rendered = function() { 
    var words = $('h1').map(function() { 
    return $(this).text(); 
    }); 
    this.state.set('words', _.uniq(words)); 
}; 

Template.buttons.created = function() { 
    this.state = new ReactiveDict; 
};

注意，你需要做的：meteor add reactive-dict

當buttons模板被創建的是初始化它自己的內部反應狀態。渲染完成後，將使用頁面上所有h1標記中的文本填充該狀態。由於該狀態是反應性的，因此它會導致testButtons運行並將格式正確的數據返回到您的模板。請參閱我的帖子Scoped Reactivity瞭解更多詳情。

因爲buttons模板使用範圍反應性，所以可以在任何頁面上隨意使用多次，而無需修改父模板。

來源

2014-08-28 14:30:03

謝謝大衛！ FWIW，我正在處理兩種不同的模板：Template.someTable中的h1標籤，而Template.buttons中的按鈕。不知道這是否會影響解決方案，但感謝您的確切答案。 – DeBraid 2014-08-28 14:42:46

這將抓取所有當前呈現的模板中的'h1'標籤，因此它應該可以正常工作。 – 2014-08-28 14:48:34

在我的情況下，該模板尚未呈現，這導致解決方案的一些問題。在執行上述操作之前，如何等待TemplateName被渲染？ – DeBraid 2014-08-29 04:00:07

雖然這並不完全清楚爲什麼你試圖解析表的內容，然後將它呈現在另一個表中（這是你想要做的，不是嗎？），基本原理如下：

您的模板將在其任何被動依賴關係發生變化時重新渲染。因此，這意味着，你需要：

在數組中保存問題的結構，它是由設計（因此無論是minimongo，即客戶端數據庫），要不然Session variable反應。
使用一個單獨的（反應性）變量，它告訴模板它需要在正確的時間重新渲染。

後者可能是從應用結構的角度不太好，但最簡單的例證：

var renderDep = new Deps.Dependency(), 
    words = []; 

UI.registerHelper('testButtons', function() { 
    renderDep.depend(); 
    return words; 
});

然後當你撥打：

$('h1').map(function() { 
    words = []; 
    words.push($(this).text()); 
    uniqStrings = _.uniq(words);  
});

確保您撥打：

renderDep.changed();

緊隨其後，所有它的依賴性（即模板助手）將重新運行並返回新的words內容。

來源

2014-08-28 14:29:55 richsilv

謝謝richsilv。關於第一句：我正在解析一個表格和渲染按鈕，而不是一個新表格。我會嘗試我們的建議，再次感謝。 – DeBraid 2014-08-28 14:38:24

設置流星JS助手的返回值，注入這種動態成模板

回答

相關問題