有沒有辦法將變量傳遞到流星模板中？

我一直在試驗流星，遇到了一些我無法弄清楚的東西。爲了好玩，我試圖製作一臺老虎機。我有以下的HTML：有沒有辦法將變量傳遞到流星模板中？

<div class="slot-wrapper"> 
    {{> slot}} 
    {{> slot}} 
    {{> slot}} 
</div> 

<template name="slot"> 
    <div class="slot"> 
    <div class="number"><span>{{ number }}</span></div> 
    <div class="divider"></div> 
    </div> 
</template>

我想爲每個插槽有不同的數字。是否有可能將變量傳遞給模板？事情是這樣的：

<div class="slot-wrapper"> 
    {{> slot 1}} 
    {{> slot 2}} 
    {{> slot 3}} 
</div> 

<template name="slot"> 
    <div class="slot"> 
    <div class="number"><span>{{ number i}}</span></div> 
    <div class="divider"></div> 
    </div> 
</template>

也許我想這個錯誤的方式，有一個更好的辦法。

來源

2012-04-12 Jordan Brown

**流星已經改變並引入Spacebars **詳情請參閱：https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/和Dascalescu回答：http ：//stackoverflow.com/a/25090098/220060 – nalply 2014-08-02 13:26:53

以前所有的答案都是矯枉過正或過時。這裏是你如何能的靜態參數傳遞到模板，直接從HTML + Spacebars代碼，如流星0.8.4的：

<div class="slot-wrapper"> 
    {{> slot number="1"}} 
    {{> slot number="2"}} 
    ... 
</div> 

<template name="slot"> 
    <div class="number"><span>{{number}}</span></div> 
</template>

所有您需要做的是通過在{{> template}}納入呼叫key="value"參數：

{{> slot number="1"}}

在Spacebars Secrets: Exploring Meteor Templates瞭解更多。

如果你想給調用者模板的數據傳遞給孩子/套/被叫模板，這裏是如何做到這一點：通過什麼。相反，從嵌套模板，訪問父數據上下文，../：

<div class="slot-wrapper"> 
    {{> slot number="1"}} 
    {{> slot number="2"}} 
    ... 
</div> 

<template name="slot"> 
    <div>Machine name: {{../name}}</div> 
    <div class="number"><span>{{number}}</span></div> 
</template>

來源

2014-08-01 23:26:26

謝謝你的答案。任何想法如何從代碼中獲得這個傳遞的參數？裏面的JavaScript – Kostanos 2015-07-18 15:18:23

@Kostanos - 使用Template.currentData（）。 – Rogach 2015-08-13 10:59:52

還有一種方法可以傳遞模板而不是變量嗎？例如... {{>插槽號碼= {{>其他模板}}}} ...？ – henk 2016-06-08 14:48:16

這就是我爲實現它所做的。我是相當新的流星所以有可能是一個更好的辦法：

Slot.html：

<head> 
    <title>Slot</title> 
</head> 

<body> 
    <div class="slot-wrapper"> 
    {{> slots}} 
    </div> 
</body> 

<template name="slots"> 
    {{#each slots}} 
    {{> slot}} 
    {{/each}} 
</template> 

<template name="slot"> 
    <div class="slot"> 
    <div class="number"><span>{{number}}</span></div> 
    <div class="divider"></div> 
    </div> 
</template>

Slot.js：

if (Meteor.is_client) { 
    Template.slots.slots = function() { 
    var returnArray = new Array(); 
    returnArray[0] = { 'number': 10 }; 
    returnArray[1] = { 'number': 87 }; 
    returnArray[2] = { 'number': 41 }; 
    return returnArray; 
    }; 
} 

if (Meteor.is_server) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    }); 
}

希望這是給你一些幫助！

來源

2012-04-12 17:57:18

有趣的方法。完成工作，但我希望有一個更優雅的方式來做到這一點。 – 2012-04-12 21:52:41

@ dan-dascalescu在底部的答案是最新的做法。它也是最簡潔的。 – JohnAllen 2014-08-01 23:30:00

原來有另一種方法。

我試圖找出如何做到這一點通過搜索各種搜索，發現這個問題，但沒有什麼符合我的目的。除非要將嵌套模板放在父模板的不同位置，否則TomUnite的答案將有效。

因此，經過多次搜索，我在流星代碼庫中找到了'一個'答案。（不是說這是明確的答案，但它的工作）

<template name="slots"> 
    {{> slot one}} 
    <div>..something else</div> 
    {{> slot three}} 
    {{> slot two}} 
</template> 

<template name="slot"> 
    <div class="slot"> 
    <div class="number"><span>{{number}}</span></div> 
    <div class="divider"></div> 
    </div> 
</template>

正如你看到的，我們可以按任意順序指定模板實例。第二個參數是實際應當被定義，所以一個變量：

Template.slots.one = { 
    number: 1 
} 
Template.slots.two = { 
    number: 2 
} 
Template.slots.three = { 
    number: 3 
}

這可以被製成更簡潔代碼有一個環形或也許使用underscore.js功能_.extend上的插槽對象。另外，我們可以將多個數據字段傳遞給這些對象。

來源

2012-10-28 09:59:19 Joc

這個答案是兩歲，不再正確。請考慮刪除它 - 你會保持點！ – 2014-11-03 00:24:37

@DanDascalescu，現在4歲：P – cenk 2016-06-26 17:08:05

我想留下它作爲評論，因爲它只是對Joc答案的澄清，但不能，所以在這裏加上我與之合作的例子。

只有一個參數可以被傳遞到模板：

{{> singleItemInfo arg1}}

該參數必須是一個對象，例如：

{ 
    number: 1, 
    number2: 2, 
    numberComposite: { 
     subnum1: 10, 
     subnum2: 20 
    } 
};

參數值可以通過他們的密鑰來訪問，並且在該範圍可以切換以獲得子項目

{{#with numberComposite}}

下面是該示例的完整代碼：

< HTML文件>

<body> 
    {{ itemsView }} 
</body> 

<template name="itemsView"> 
    {{> singleItemInfo arg1}} 
</template> 

<template name="singleItemInfo"> 
    arg1 = {{ number }} 
    arg2 = {{ number2 }} 
    {{#with numberComposite}} 
     subArg1 = {{ subnum1 }} 
     subArg2 = {{ subnum2 }} 
    {{/with}} 
</template>

< JavaScript文件>

Template.itemsView.arg1 = { 
    number: 1, 
    number2: 2, 
    numberComposite: { 
     subnum1: 10, 
     subnum2: 20 
    } 
};

OUTPUT：

arg1 = 1 arg2 = 2 subArg1 = 10 subArg2 = 20

來源

2012-11-02 02:47:28 jay

作爲補充，您可以在那裏使用反應性數據源，例如'Template。itemsView.arg1 = function（）{Session.get（'arg1object'）}'，子模板將自動更新數據源。 – 2013-07-22 22:16:11

@EmmanuelJoubaud我將數據從助手傳遞到這樣的模板中，這應該是一個被動數據源，但是當助手更新時，數據傳遞給的模板不會更新。有任何想法嗎？ – 2017-07-30 13:33:24

從Template.instance（）中找出它，我從幫助器中獲取模板中的數據（所以我可以進一步操作它）。，然後將其返回到模板。我改變它來從Template.instance（）。數據獲取數據，現在可以工作。 – 2017-07-30 13:46:08

我通常使用這兩個把手助手：

Handlebars.registerHelper('partial', function(templateName, options) { 
    return new Handlebars.SafeString(Template[templateName](options.hash)); 
}); 

Handlebars.registerHelper('partialWithContext', function(templateName, context, options) { 
    var extendedContext = _.extend(context, options.hash); 
    return new Handlebars.SafeString(Template[templateName](context)); 
});

你可以使用它像這樣（假設你有一個名爲menuItem模板）：

{{partial 'menuItem' command='Open'}}

或迭代內（假設你有一個模板稱爲userProfile）：

{{#each regularUsers}} 
    {{partialWithContext 'userProfile' . isAdmin=false}} 
{{/each}} 

{{#each admins}} 
    {{partialWithContext 'userProfile' . isAdmin=true}} 
{{/each}}

使用Spacebars，您可以實現某種類似的行爲。在partial.js：

Template.partialWithContext.chooseTemplate = function (name) { 
    return Template[name]; 
};

在partial.html：

<template name="partialWithContext"> 
    {{#with chooseTemplate name}} 
     {{#with ../data}} 
      {{> ..}} 
     {{/with}} 
    {{/with}} 
</template>

使用方法如下：

{{#each commands}} 
    {{> partialWithContext name="commandListItem" data=this isAdmin=false}} 
{{/each}} 
{{#each adminCommands}} 
    {{> partialWithContext name="adminCommandListItem" data=this isAdmin=true}} 
{{/each}}

希望它會做的伎倆。

來源

2014-02-04 20:29:27 Zsolt

這很好用 - 謝謝！ – Tomba 2014-02-20 09:03:22

這不再適用於Spacebars的引入。我仍然試圖找出解決方案。 – Seiyria 2014-07-19 17:17:42

嗨Seiyria。是的，您不能使用原始解決方案，因爲他們不再使用Handlebars。你可以在答案中找到我更新的方法。 – Zsolt 2014-07-22 07:23:36

此信息是過時的，傳遞參數的詳細這裏火焰佈局引擎描述： https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/

來源

2014-07-23 10:04:30 Jim

你應該寫一個關於Blaze變化的總結，然後直接回答這個問題。那麼你不會陷入低谷。（我沒有downvote你的答案。） – nalply 2014-08-02 13:28:07

更好的答案：

兩個解決方案，可用於製作新的Blaze佈局下一個模板上下文敏感的是：

1）傳輸參數，以利用在能夠理解上下文中的模板的輔助模板直接

{{> contextSensitiveTemplate context_1='x' context_2='y' }}

2）。當你通過一個只有一個參數

{{ contextHelperName ../.. .. this }}

而且

Template.contextSensitiveTemplate.contextHelperName = function(parent_template, current_template, current_value_inside_each_loop) { 
    return context_dependent_value_or_html  
}

來源

2014-08-04 09:53:46 Jim

使用this：調用這樣的幫手。

<div class="slot-wrapper"> 
    {{> slot 1}} 
    {{> slot 2}} 
</div> 

<template name="slot"> 
    <div class="slot"> 
     <div class="number"><span>{{this}}</span></div> 
     <div class="divider"></div> 
    </div> 
</template>

不需要JavaScript來做到這一點。如果你需要比爭論更多的話，請嘗試丹的方式。

來源

2015-06-17 18:44:08

很多很好的信息在這裏。我的具體情況是我也想通過一些模板數據。

我想讓孩子的Blaze組件重新使用，所以所有的數據都必須傳入。舉個例子，假設這個組件顯示了一個等級（即A，B，C等）。在一個頁面上，我想要使用這個組件兩次：你的成績和你的同學的平均成績。

這裏的子組件...

Grade.html

<template name="Grade"> 
    <h3>{{title}}</h3> 
    <div>{{grade}}</h3> 
</template>

標題可以在父類中硬編碼，但檔次來自分貝。以下是我的代碼父...

GradePage.html

<template name="GradePage"> 
    {{> Grade grade=gradeYours title="Your Grade" }} 
    {{> Grade grade=gradeClass title="Class Grade" }} 
</template>

GradePage.js（在現實生活中是被動的，但在這裏簡化）

Template.GradePage.helpers({ 
    gradeYours: function() { 
     return 'A-'; 
    }, 
    gradeClass: function() { 
     return 'B+'; 
    } 
});

就是這樣。孩子的組成部分根本不需要伸手去拿它的價值。

來源

2016-05-16 00:57:11 zim

有沒有辦法將變量傳遞到流星模板中？

回答

相關問題