流星 JS - 按 ID 调用集合中的单个文档

Meteor JS - Call individual Docs from Collection by ID

本文关键字：单个 文档 集合 调用 JS ID 流星      更新时间：2023-09-26

我已经预先编写了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 初学者）。

当然请记住，也许这可以做得更好或以其他方式完成。这只是我想出如何在吉姆麦克斯的帮助下做到这一点的唯一方法。

相关文章：