动态选择值 [英] Dynamic select value in ractive

问题描述

当使用ractive时，此工作正常：

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

只要 sortColumn 本身是一个固定的串。
我的问题是，如果我想创建几个选择，用上层数组索引，如下所示：

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

其中 type 被一个 list 元素索引。这在渲染方面效果很好，我得到了正确的选项。但是select自身的值被复制为 sortColumn ，因此观察它会被触发，每个具有相同函数的单个选择除了值之外没有任何区别。

如何避免这种情况？是否有可能为每个选择赋予（并观察）不同的名称？

谢谢

解决方案

是的，这当然有可能 - 您可以创建一个单独的 sortColumns 对象，并使用双向绑定和 sortColumns [this ] 。

var ractive = new Ractive（{el：'main'，template：'#template'，数据：{list：['a'，'b'，'c']，类型：{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> {{/每个}}< / select> {/每个}}< p>< code> sortColumns：{{JSON.stringify（sortColumns）}}< / code>< / p>< / script>< main>< / main>

或者，您的列表可以是本地存储它们的 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> {{/每个}}< / select> {/ with}} {{/ each}}< p>< code> type：{{JSON.stringify（type）}}< / code>< / p>< / script>< main> ;< / main>

When using ractive this works fine:

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

As long as sortColumn itself is a fixed string. My question is, what if I want to create several selects, indexed by a upper level array, something like:

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

Where type is indexed by a list element. This works great in terms of rendering, I get the right options rendered. But the value of the select itself is replicated as sortColumn, and thus observing it will be triggered for each of the individual selects with the same function with nothing to distinguish them besides the values.

How to avoid this? Is it possible to attribute (and observe) different names to each select?

Thanks

解决方案

Yes, it's certainly possible - you can create a separate sortColumns object and use two-way binding with expressions like 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>

Alternatively, your list could be an array of objects that store their sortColumn locally:

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>

这篇关于动态选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！