Как добавить уникальный класс и назначить уникальные данные для копий одного и того же шаблона, используя Meteor, Blaze, Spacebars?

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>

Я заселяю propertyImages с httpRequest (я делаю несколько из них):

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

с каждым ползунком, содержащим его соответствующие изображения, ИЛИ я теперь вижу, что, возможно, партиалы могли бы работать как-то:

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

Каждому ползунку в основном нужно свое собственное имя класса, так что логика, которая запускается при рендеринге, будет нацелена на каждого из них, а не на всех.

Answer 1

В самом деле, вы можете использовать партиалы в пробелах Blaze с помощью:

• Единственный аргумент, который действует как контекст данных вызываемого шаблона (как показано в Метеоритном Руководстве> Вид> Интерфейсы пользователя> Компоненты пользовательского интерфейса> Интеллектуальные компоненты).
• Именованные аргументы (как показано в Руководстве по метеору> Вид> Blaze > Пробелы> Включение шаблона), которые фактически собраны в объект данных (см. Ниже).

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

Еще одно руководство: http://meteorcapture.com/spacebars/

Справка: Документы Meteor API> Пакеты> Пробелы> Аргументы включения и блока

Теги включения ({{> foo}}) и блокировать теги ({{#foo}}) принимать один аргумент данных или без аргумента. Любая другая форма аргументов будет интерпретироваться как спецификация объекта или вложенный помощник:

• Спецификация объекта: если есть только ключевые аргументы, как в {{#with x=1 y=2}} или же {{> prettyBox color=red}} аргументы ключевого слова будут собраны в объект данных со свойствами, названными в честь ключевых слов.

• Вложенный помощник: если есть позиционный аргумент, за которым следуют другие (позиционные или ключевые аргументы), первый аргумент вызывается для других с использованием обычного соглашения о вызове вспомогательного аргумента.

Затем вы извлекаете контекст данных через templateInstance.data имущество:

• В onCreated, onRendered или же onDestroyed обратный вызов, экземпляр шаблона непосредственно доступен в this,

• В помощнике или в HTML-части шаблона контекст данных напрямую доступен в this (нет необходимости искать его data детская собственность). В помощнике вы также можете получить доступ к шаблону через Template.instance(),

• В обработчике событий экземпляр шаблона передается как второй аргумент слушателя.