2

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

4

2 回答 2

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>
于 2013-09-17T09:04:59.733 回答
0

Allright, Jim Macks answer is correct BUT everyone who wants to use this should read this also:

First of all: i was VERY confused that the "internal function" code was not written in Javascript. And it took me a while to figure everything out. Here's my complete working code with only the necessary stuff.

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>

My article elements are in another template themselves. Wrapping your products / collection items into {{#isolate}} will prevent the whole page/template to be rerendered if one product changes. Otherwise all your DOM-changes will be gone if you do something in your own JS-file in document.ready for example. It's also simply not necessary to rerender the whole (big) template/DOM for one product.

"Products" Template

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

This of course can look however you want. This is just my version.

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

I should note, that both, my Collection and my Template for that Collection are named "Products". Jim Mack has a lot more code in there but frankly i have no idea why. This doesn't mean his code isn't usefull or necessary for something, it just means i have no idea what it does or why it is there (i'm a meteor/handlebars/nodeJS beginner).

Of course keep in mind that maybe this could be done better or in another way. This is just the only way i figured out how to do it with Jim Macks help.

于 2013-09-18T10:36:16.780 回答