我已经预先编写了HTML,并希望从DOM的任何地方获取我的集合中的特定文档。
喜欢这个:
<article>
<div class="content boxes-3">
<div class="box"></div>
<div class="box text">
<h2>Lorem of the Month</h2>
<p>
Lorem Upsum
</p>
</div>
<div class="box" data-product="0001"></div>
</div>
</article>
<article>
<div class="content">
<div class="box" data-product="0002"></div>
</div>
</article>
<article>
<div class="content boxes-2">
<div class="box" data-product="0002"></div>
<div class="box" data-product="0003"></div>
</div>
</article>
data-product
是我的收藏中文档的 ID。
这可能吗?
注意:在与Jim Mack愉快交谈后,我编辑了这个问题,以归结为我的主要问题。
为了更好地理解原始问题,(并编辑以包含数据),
HTML:当您想要拉入时,请放入任何模板。
{{product id='0001' title='Description code' another='code' }}
{{product_for_catalog id='0002' title='Description code 2' }}
内部功能:
recordToTemplate = (options) ->
# allow for simple params as default
options.hash.title = options.hash.title or options.hash.fname
options.hash.template = options.hash.template or "product"
options.hash.placeholder = options.hash.placeholder or options.hash.title
options.hash.type = options.hash.type or 'text'
options.hash.data = Products.findOne({_id: id}); ## ADDED
new Handlebars.SafeString(Template[options.hash.template](options.hash))
助手:
Handlebars.registerHelper "product", (options) ->
# you can fix up here to set options defaults.
recordToTemplate.call this, options
Handlebars.registerHelper "product_for_catalog", (options) ->
# you can fix up here to set options defaults.
options.hash.template = 'catalog_product'
recordToTemplate.call this, options
模板:
<template name="product">
<div id="{{Id}}" class="product-action">
<div class="btn plus">
<i class="icon-remove"></i>
</div>
<div class="info">
{{#with data}}
<p>{{Desc}}</p>
<p>EUR {{Price}}</p>
{{/with}}
</div>
<div class="btn cart">
<i class="icon-shopping-cart"></i>
</div>
</div>
</template>
好吧,Jim Macks 的答案是正确的,但每个想使用它的人都应该阅读以下内容:
首先:我对"内部函数"代码不是用Javascript编写的感到非常困惑。我花了一段时间才弄清楚一切。这是我的完整工作代码,只有必要的东西。
.HTML
<article>
<div class="content boxes-3">
<div class="box"></div>
<div class="box text">
<h2>Headline</h2>
<p>Lorem Ipsum Lorem</p>
</div>
<div class="box">
{{#isolate}}{{product id='0001'}}{{/isolate}}
</div>
</div>
</article>
<article>
<div class="content">
<div class="box">{{#isolate}}{{product id='0002'}}{{/isolate}}</div>
</div>
</article>
我的article
元素本身就在另一个模板中。将您的产品/产品系列包装到{{#isolate}}
中将防止在一个产品更改时重新呈现整个页面/模板。否则,例如,如果您在自己的 JS 文件中执行某些操作,则所有 DOM 更改都将消失document.ready
。也根本不需要为一个产品重新渲染整个(大)模板/DOM。
"产品"模板
<template name="Products">
<div id="{{Id}}" class="product-action">
<div class="btn plus">
<i class="icon-remove"></i>
</div>
<div class="info">
<p>{{Desc}}</p>
<p>EUR {{Price}}</p>
</div>
<div class="btn cart">
<i class="icon-shopping-cart"></i>
</div>
</div>
</template>
这当然可以随心所欲地看起来。这只是我的版本。
Javascript 客户端
Handlebars.registerHelper("product", function(options) {
return recordToTemplate(this, options);
});
var recordToTemplate = function(obj, options) {
var id = options.hash.id;
return new Handlebars.SafeString(Template.Products(Products.findOne({Id: id})));
}
Template.Products.events = {
'click .cart' : function(e) {
// your event code
}, 'click .plus' : function(e) {
// more event code
}
};
我应该注意,我的收藏夹和该收藏夹的模板都命名为"产品"。Jim Mack有更多的代码,但坦率地说,我不知道为什么。这并不意味着他的代码对某些东西没有用或没有必要,这只是意味着我不知道它做什么或为什么它在那里(我是流星/车把/nodeJS 初学者)。
当然请记住,也许这可以做得更好或以其他方式完成。这只是我想出如何在吉姆麦克斯的帮助下做到这一点的唯一方法。