Meteor: как установить значение массива, в пробелах, динамически

Question

Я действительно не знаю, как это объяснить ... У меня есть коллекция, в которой есть массив, и когда я проходил через нее, я устанавливал цвета . [0] .imageLink и не меняя [0], но теперь я бы хотел, чтобы это было динамическим в зависимости от значения функции (в этом случае функция - viewIndex).

Работает, но не является динамическим:

<h3 class='display-price'>$ {{colors.[0].price}}</h3> 

Что я думаю, что будет работать, но это не так:

<h3 class='display-price'>$ {{colors.[(viewIndex)].price}}</h3> 

В соответствующем файле JS (действительно возвращается 0):

'viewIndex': function() { 
    console.log(Template.instance().variation.get()); 
    return Template.instance().variation.get(); 
} 

Answer 1

Один из способов сделать то, что вы пытаетесь сделать, - определить помощник colorPrice, который принимает colors и viewIndex в качестве параметров следующим образом:

Template.hello.helpers({ 
    colors() { 
    return [ 
     { price: 1}, 
     { price: 2}, 
     { price: 3} 
    ]; 
    }, 
    viewIndex(){ 
    return 1; 
    }, 
    colorPrice(colors, viewIndex){ 
    return colors[viewIndex].price; 
    } 
}); 

Затем в шаблоне вы можете использовать его следующим образом:

<template name="hello"> 
    ${{ colorPrice colors viewIndex }} 
</template> 

Answer 2

Так спасибо Калмана для получения меня думать о динамической способ сделать это используя больше javascript! Моим решением было по существу использовать помощники и «это» ключевое слово, вызывая вспомогательные функции в {{#with item}}, которые передавали «это» все значения текущего элемента, на котором он был, поэтому по существу это стало возможным:

variationImage() { 
    return this.colors[Template.instance().variation.get()].imageLink[0]; 
}, 
variationLink() { 
    return this.colors[Template.instance().variation.get()].referralLink; 
}, 
variationPrice() { 
    return this.colors[Template.instance().variation.get()].price; 
} 

И в этот момент получать эти значения так просто, как с помощью {{variationPrice}}, где мне нужна цена и т.д.

{{#with item}} 
    <h3 class='display-price'>$ {{variationPrice}}</h3> 
{{/with}} 

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

(где цвета представляет собой массив, содержащий различные цветовые вариации элемента)

{{#each colors}} 
    <option value='{{@index}}'>Variation {{variationIndex @index}}</option> 
{{/each}} 

(вспомогательная функция)

variationIndex(index) { 
    return index+1; 
} 

(функция события, чтобы установить значение изменения)

'change .color-variation-select': function(event, template) { 
    template.variation.set($(event.target).val()); 
},