0

我遇到了教程部分:http ://learn.ractivejs.org/list-sections/5/

尝试使用选择和排序。

活性模板

<th class='sortable {{ sortColumn === type ? "sorted" : "" }}' on-tap='sort:type'>
    <div class="industry select">
      <select>
        {{#each type}}
          <option> {{this}} </option>
        {{/each}}
      </select>
    </div>
</th>

HTML

<div data-list></div>

活性脚本

var type = ['Cat', 'Dog', 'Hamster'];
var ractive = new Ractive({
  el: document.querySelector('[data-list]'),
  template: '#list-container',
  data: {
    type: type,
    sort: function ( array, column ) {

          return array.sort( function ( a, b ) {
          return a[ column ] - b[ column ];
     });
    },
    sortColumn: 'type'
  }
})

希望能够选择任何类型,然后按类型排序,比如猫;它将列出猫并列出狗和仓鼠。

非常感谢您对 ractive 的任何见解/帮助!

更新

JSFIDDLE 演示

目前它不起作用,因为我认为动物和排序不正确

4

1 回答 1

0

看起来您需要在元素上设置双向绑定<select>,以便 Ractive 知道sortColumn应该是什么值:

<select value='{{sortColumn}}'>
  {{#each type}}
    <option>{{this}}</option>
  {{/each}}
</select>
于 2014-09-30T18:38:04.483 回答