KnockoutJS: фильтрация списка с сохранением состояния

[santeri]

наверное нужно перенести в Q&A

[aTei]

Это работающий пример использования, который можно взять и адаптировать под свои нужды.
Также это призыв к обсуждению, чтобы найти, как правильно использовать Knockout и как делать не нужно.

[vyacheslav_ka]

Тем более надо в Q&A. А вот когда уже будет найден оптимальный вариант, тогда и можно будет с ним сделать статью.

[aTei]

Извините, если ввел в заблуждение. Пример использует те Лучшие практики, которые мне известны (например, практика о том, где именно фильтровать observableArray habrahabr.ru/post/124931/) и является оптимальным для изучения. Но понимаю — можно сделать лучше. Именно это побудило задать вопросы в конце статьи и сделать примечание в начале.

[porcelanosa]

Отлично! Только для новичков, конечно хотелось бы пояснений. Понятно, что сначала надо почитать мануалы и т.д.
Но вот я прошла он-лайн курс у них на сайте — правда с месяц назад — уже все забыла, и многое не понятно.
Если были бы короткие комментарии в коде — было бы проще.
Но все равно спасибо

[mac2000]

Как то странно, в заголовке вы пишите о фильтрации, а в примере все крутиться вокруг сортировки.

Да я видел что там есть фильтр «закончившиеся» но у меня вопрос во что это превратиться когда фильтров будет больше, намного больше?

FilteredItems превратиться в монстра, а самое веселое начнется когда вас попросят добавить, скажем rss по результатам поиска, вам придется все это дублировать на сервере.

Для поиска «лучших» решений предлагаю посмотреть в сторону Apache Solr, для затравки вот небольшое видео: m.youtube.com/watch?v=-LD1aCxYODI

[xdenser]

1. Завернуть весь код в self-invoking функцию
2. Функции сортировки, если больше нигде не используются вполне могут быть использованы по месту.
3. В Java Script есть оператор switch case, чтоб не писать вот это

if (sortType == 'asc')
        viewModel.items.sort(sortAsc);
    else if (sortType == 'date')
        viewModel.items.sort(sortDate);

[xdenser]

но в данном случае я бы сделал что-то вроде

   var sortTypes = {
       'asc': function(left,right) {...} ,
       'date': function(left,right) {...} 
   }
 ...
 if(sortTypes[sortType]) viewModel.items.sort(sortTypes[sortType]);

[serf]

Так чуть интереснее:

sortTypes[sortType] && viewModel.items.sort(sortTypes[sortType]);

[xdenser]

Можно и так, но IMHO хуже читается. Такой способ вызова хорош для присваивания.

[serf]

Ну не знаю, мне например блок «if» без фигурных скобок глаз режет, пускай там даже и один оператор внутри, а так нет «if» — нет скобок, формальности соблюдены :)

[arXangel]

Но если блок «if» без фигурных скобок, в котором один оператор (естественно), но он перенесён на другую строку и отделён табуляцией (пробелами), то всё вполне нормально.

...

if ( sortTypes[ sortType ] )
    viewModel.items.sort(sortTypes[sortType]);

...

[m_z]

js(h|l)int не пропустил бы.

[arXangel]

Согласен, это уже вопрос религии. На мой взгляд, такой код хорошо читается, чуть-чуть меньше вешает (чище, аля питон) и вполне валидный. С таким же успехом можно говорить про точку с запятой. Главное понимать как это работает и делать код читаемым, если задача позволяет.

[m_z]

Код то читаемый, а вот если чего добавить надо внутрь условия, нужно будет расставлять скобки за кого-то. А с точкой запятой ситуация другая: пропустив ее можно получить проблемы при минификации.

[arXangel]

Не только при минификации, это уже обсуждали на хабре. А про скобки, если надо несколько операторов в блоке, то да, придётся расставить скобки, но это же не проблема.

[serf]

Не совсем религии, так практичнее и однозначнее.

[arXangel]

Если вы за однозначность и практичность, то зачем такое писать выше?

sortTypes[sortType] && viewModel.items.sort(sortTypes[sortType]);

Всё таки, тут религия и привычный стиль программирования. Главное понимать, как работает ваша конструкция, ну и чтобы другим было понятно.

[serf]

так все вроде очевидно )

[arXangel]

Так и в моей конструкции всё очевидно +)

[serf]

Но эстетики не хватает )

[arXangel]

Нас должен кто-то рассудить +)… я считаю что мы подались в религию. Эстетика — отчасти субъективная штука.

[serf]

Для присваивания как раз не так хорошо, потому что этот блок присваивания нужно будет обрамить в круглые скобки.

[xdenser]

Зачем?

[serf]

Чтобы избежать ошибки JS, ваш Кэп.

[xdenser]

Какой ошибки?

[serf]

Как-то так

trueCondition && (variable = someValue);

[xdenser]

Ну и по названиям функций/полей мешанина — тяжело врубится потом будет, что они на самом деле делают. getFilter — возвращает тип сортировки, а называется… filterSimple — как бы и не фильтр совсем — это вид представления. Сомнения вызывает способ переключения между упрощенным и… не упрощенным видом. Обычно для этого применяют шаблоны. Возможно тут достаточно просто переключить CSS класс, но обычной практикой я бы назвал шаблоны.

[z_z]

knockoutjs.com/documentation/extenders.html
www.knockmeout.net/2012/08/thatconference-2012-session.html

Можно делать обертки вокруг observables если не нравятся экстендеры, или добавлять логику в .fn метод, вобще есть милиард способов решить эту проблему, но автор видимо привык решать вопросы в гугле.

[arXangel]

Автор хочет поделиться своим решением, получить конструктивную критику и сделать еще лучше… я думаю. И это же хорошо.

[serjoga]

Как-то на статью вообще ни разу не тянет: ни объяснений по коду, ни описанного принципа. Таких примеров на Knockoutjs.com целая куча