Meteor JS -按ID从集合中调用单个文档

Question

我已经预先编写了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进行了一次愉快的交谈之后，编辑了这个问题，以讨论我的主要问题。

Answer 1

为了更好地理解最初的问题，(并编辑以包括数据)，

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>

Answer 2

好吧，吉姆·马克斯的答案是正确的，但是每一个想要使用这个答案的人都应该阅读以下内容：

首先，我对“内部函数”代码没有用Javascript编写感到非常困惑。我花了一段时间才弄清楚所有的事情。这是我的完整工作代码，只有必要的东西。

<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}}中将防止如果一个产品发生更改，整个页面/模板将被重新命名。否则，如果您在document.ready中自己的JS文件中执行某些操作，则所有DOM更改都将消失。也没有必要为一个产品重新修改整个(大的)模板/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
    }
};

我要指出的是，我的收藏集和该集合的模板都被命名为"Products“。Jim有更多的代码，但坦率地说，我不知道为什么。这并不意味着他的代码对某些事情没有用处或必要，它只是意味着我不知道它是做什么的，也不知道为什么它在那里(我是一个流星/把手/nodeJS初学者)。

当然，请记住，也许这可以做得更好，或者以另一种方式。只有这样，我才知道如何在吉姆·马克斯的帮助下做到这一点。