Question

使用ractive时，这很好用：

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

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

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

其中type由list元素编入索引。这在渲染方面效果很好，我得到了正确的渲染选项。但是select本身的值被复制为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>

ractive中的动态选择值

1 个答案: