如何使用 Meteor、Blaze、Spacebars 添加唯一 class 并将唯一数据分配给同一模板的副本？

Question

我正在尝试创建一个可重复用于不同图像的动态滑块。

<div id="sly_container" class="sly">
    <ul>
        {{#each propertyImages}}
        <li><img src="{{ImageURL}}"></li>
        {{/each}}
    </ul>
<button id="gallery_btn-prev"><img class="gallery_arrow"/>prev</button>
<span id="middleSpan"></span>
<button id="gallery_btn-next"><img class="gallery_arrow"/>next</button>
</div>

我用 httpRequest 填充 propertyImages（我制作了其中的几个）：

(function(o){
    HTTP.call( 'GET', 'https://api.rentcafe.com/rentcafeapi.aspx?requestType=images&type=propertyImages&companyCode=c00000084939&propertyCode='+v+'', {}, 
    function( error, response ) {
        if ( error ) {
            console.log( error );                               
        } else {
            var content = JSON.parse(response["content"]); 
            obj[p] = content;
            if( o == l){    
                CommunityImages.insert(obj) 
                Session.set('imagesLoaded',true);               
            }
        }
        console.log(v+ ' ' + p + ' ' + o + ' images delivered')         
    })
}(o++))

然后使用这个助手：

Template.sly.helpers({

    propertyImages: function(){
        if(Session.get('property') && CommunityImages.find().fetch()[0]){
            return CommunityImages.find().fetch()[0][Session.get('property')]
    }
})

渲染后，我运行在其上添加了一些逻辑以从图像创建滑块。当每个视图有一个滑块时效果很好，因为它依赖于 Session.set('property', 'whatever') 但我想在同一页面上有许多滑块，每个滑块都填充了不同的图像。我可以向图像对象添加键和值，所以我想也许我可以使用 Spacebars 条件来做到这一点？最后我想要这样的东西

    <div id="summit-sly">{{> sly}}</div>
    <div id="hillcroft-sly">{{> sly}}</div>
    <div id="merrit_station-sly">{{> sly}}</div>

每个滑块都包含它各自的图像，或者我现在看到也许 partials 可以以某种方式工作：

  {{>sly summit}}
  {{>sly hillcroft}}
  {{>sly merrit_station}}

每个滑块基本上都需要它自己的 class 名称，因此渲染上的运行逻辑将专门针对每个滑块而不是所有滑块。

Answer 1

事实上，您可以在 Blaze 空格键中使用分音符：

作为被调用模板的数据上下文的单个参数（如Meteor Guide > View > User Interfaces > UI components > Smart components中所示）。
命名参数（如Meteor Guide > View > Blaze > Spacebars > Template inclusion所示），实际组装成一个数据object（见下文）

{{> subComponent arg1="value-of-arg1" arg2=helperThatReturnsValueOfArg2}}

另一个教程：http://meteorcapture.com/spacebars/#template-inclusion-ex-2

参考：Meteor API Docs > Packages > spacebars > Inclusion and Block Arguments

Inclusion tags ({{> foo}}) and block tags ({{#foo}}) take a single data argument, or no argument. Any other form of arguments will be interpreted as an object specification or a nested helper:

Object specification: If there are only keyword arguments, as in {{#with x=1 y=2}} or {{> prettyBox color=red}}, the keyword arguments will be assembled into a data object with properties named after the keywords.

Nested Helper: If there is a positional argument followed by other (positional or keyword arguments), the first argument is called on the others using the normal helper argument calling convention.

然后通过 templateInstance.data 属性:

检索数据上下文

在 onCreated、onRendered 或 onDestroyed 回调中，模板实例可直接在 this.
中使用
在助手或模板的 HTML 部分中，数据上下文在 this 中直接可用（无需查找其 data child 属性）。在助手中，您还可以通过 Template.instance().
访问模板
在事件处理程序中，模板实例作为侦听器的 2nd argument 传递。

如何使用 Meteor、Blaze、Spacebars 添加唯一 class 并将唯一数据分配给同一模板的副本？

How can I add a unique class and assign unique data to copies of the same template using Meteor, Blaze, Spacebars?

handlebars.js

meteor

spacebars

meteor-blaze