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')但我希望在同一页面上有许多用不同的图像填充。我可以为图像对象添加键和值，所以我想也许我可以使用条带空格键来做到这一点？最后，我想要有类似的东西

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

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

Answer 1

实际上，您可以使用Blaze空格键中的部分：

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

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

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

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

包含标记（{{> foo}}）和块标记（{{#foo}}）采用单个数据参数或无参数。任何其他形式的参数都将被解释为对象规范或嵌套助手：



对象规范：如果只有关键字参数，如{{#with x=1 y=2}}或{{> prettyBox color=red}}，关键字参数将被组合到一个名为property的数据对象中在关键字之后。



嵌套助手：如果有一个位置参数后跟其他（位置或关键字参数），则使用正常的助手参数调用约定在其他参数上调用第一个参数。

然后通过templateInstance.data属性检索数据上下文：

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

如何使用Meteor，Blaze，Spacebars添加唯一类并为同一模板的副本分配唯一数据？

1 个答案: