динамического выбора значения в

Question

теля Тяговая

При использовании теля Тяговая это работает отлично:

<select value='{{sortColumn}}'> 
    {{#each type}} 
    <option>{{this}}</option> 
    {{/each}} 
</select> 

Пока sortColumn само по себе является фиксированной строкой. Мой вопрос, что если я хочу создать несколько выбирает, индексированные с помощью массива верхнего уровня, что-то вроде:

{{#each list}} 
    <select value='{{sortColumn}}'> 
    {{#type[.]}} 
     <option>{{this}}</option> 
    {{/}} 
    </select> 
{{/each}} 

Где type индексируется с помощью list элемента. Это отлично работает с точки зрения рендеринга, я получаю нужные варианты. Но значение самого выбора реплицируется как sortColumn, и, таким образом, наблюдение за ним будет инициировано для каждого из отдельных выборок с той же функцией, при этом ничто не отличает их, кроме значений.

Как этого избежать? Можно ли приписывать (и наблюдать) разные имена для каждого выбора?

Благодаря

Answer 1

Да, это, конечно, возможно - вы можете создать отдельный sortColumns объект и использовать двухстороннее связывание с выражениями типа sortColumns[this].

var ractive = new Ractive({ 
 
    el: 'main', 
 
    template: '#template', 
 
    data: { 
 
    list: [ 'a', 'b', 'c' ], 
 
    type: { 
 
     a: [ 1, 2, 3 ], 
 
     b: [ 4, 5, 6 ], 
 
     c: [ 7, 8, 9 ] 
 
    }, 
 
    sortColumns: {} 
 
    } 
 
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
 
<script id='template' type='text/html'> 
 
    {{#each list}} 
 
    <select value='{{sortColumns[this]}}'> 
 
     {{#each type[this]}} 
 
     <option>{{this}}</option> 
 
     {{/each}} 
 
    </select> 
 
    {{/each}} 
 
    
 
    <p><code>sortColumns: {{JSON.stringify(sortColumns)}}</code></p> 
 
</script> 
 

 
<main></main>

Кроме того, ваш list может быть массивом объектов, которые хранят их sortColumn локально:

var ractive = new Ractive({ 
 
    el: 'main', 
 
    template: '#template', 
 
    data: { 
 
    list: [ 'a', 'b', 'c' ], 
 
    type: { 
 
     a: { sortColumn: 1, values: [ 1, 2, 3 ] }, 
 
     b: { sortColumn: 4, values: [ 4, 5, 6 ] }, 
 
     c: { sortColumn: 7, values: [ 7, 8, 9 ] } 
 
    } 
 
    } 
 
});

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script> 
 
<script id='template' type='text/html'> 
 
    {{#each list}} 
 
    {{#with type[this]}} 
 
     <select value='{{sortColumn}}'> 
 
     {{#each values}} 
 
      <option>{{this}}</option> 
 
     {{/each}} 
 
     </select> 
 
    {{/with}} 
 
    {{/each}} 
 
    
 
    <p><code>type: {{JSON.stringify(type)}}</code></p> 
 
</script> 
 

 
<main></main>