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 Clientside

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
    }
};

我应该注意，我的Collection和我的Collection for the Collection都被命名为“Products”。吉姆麦克有更多的代码，但坦率地说，我不明白为什么。这并不意味着他的代码对于某些东西没有用处或必要，它只是意味着我不知道它的作用或原因（我是流星/把手/ nodeJS初学者）。

当然要记住，也许这可以更好或以其他方式完成。这是我理解如何使用Jim Macks帮助的唯一方法。

Meteor JS - 按ID收集个人文档

2 个答案: