Сортировать по типу в ractive

Я наткнулся на учебную часть: http://learn.ractivejs.org/list-sections/5/

Делал попытки с select и sort.

Ractive шаблон

<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>

Ractive скрипт

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

В настоящее время это не работает, потому что животное и сортировка неверны, я думаю


ractivejs
person joe    schedule 30.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вам нужно настроить двустороннюю привязку к элементу <select>, чтобы Ractive знал, каким должно быть значение sortColumn:

<select value='{{sortColumn}}'>
  {{#each type}}
    <option>{{this}}</option>
  {{/each}}
</select>
person Rich Harris    schedule 30.09.2014
comment
кажется, что он ничего не делает.. возможно {{ sortColumn === type ? отсортировано: }} не так? - person joe; 01.10.2014
comment
В вашем примере type - это массив, так что это точно не сработает. Можете ли вы опубликовать некоторые образцы данных и свой полный шаблон (в идеале в JSFiddle, чтобы его было легко отлаживать и разветвлять - вот шаблон? Без этого очень сложно понять, что вы пытаетесь сделать. - person Rich Harris; 01.10.2014
comment
Я сделал jsfiddle выше, но все равно тот же результат - животное не может быть отсортировано. Если выбрать кошку, все кошки и остальные будут отображаться в очереди после кошки. Есть ли обходной путь? - person joe; 01.10.2014
comment
Ваш шаблон представляет собой просто статическую разметку — вам нужно использовать привязку данных, если вы хотите, чтобы он повторно отображался при изменении ситуации: jsfiddle.net/rich_harris/ag2tLd6c - person Rich Harris; 02.10.2014
comment
огромное спасибо. при привязке данных вы ссылаетесь на {{selected}} и {{#each sort(animals,selected)}} правильно? Неудивительно, что он работает неправильно. - person joe; 02.10.2014
comment
Да, идея систем шаблонов заключается в том, что отображаемый результат зависит от некоторых входных данных. В случае Ractive (и других систем, основанных на шаблонах Mustache) это означает использование тегов {{mustache}} вместо статической разметки. value={{selected}} является двусторонней привязкой — так же как изменения данных приводят к изменениям модели-›представления, манипулирование элементом <select> приводит к изменениям вида-›модели (которые затем вызывают дополнительные изменения модели-›представления) . - person Rich Harris; 02.10.2014
comment
еще раз большое спасибо. Я надеюсь узнать больше о шаблонах ractive :) Спасибо за вашу тяжелую работу над ractive - person joe; 02.10.2014