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

好的，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}} 将防止在一个产品更改时重新呈现整个页面/模板。否则，如果您在 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
    }
};

我应该注意，我的收藏和该收藏的模板都被命名为“产品”。 Jim Mack 里面有更多的代码，但坦率地说我不知道​​为什么。这并不意味着他的代码对某些东西没有用或没有必要，它只是意味着我不知道它的作用或它为什么存在（我是一个流星/车把/nodeJS 初学者）。

当然请记住，也许这可以做得更好或以其他方式。这是我在 Jim Macks 的帮助下弄清楚如何做到这一点的唯一方法。