aTei Sep 30 2012 at 10:37

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

4 min

12K

JavaScript*

Tutorial

+14

Comments 31

santeri Sep 30 2012 at 11:07

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

aTei Sep 30 2012 at 11:15

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

vyacheslav_ka Sep 30 2012 at 11:17

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

aTei Sep 30 2012 at 11:31

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

porcelanosa Sep 30 2012 at 13:14

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

mac2000 Sep 30 2012 at 12:03

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

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

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

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

xdenser Sep 30 2012 at 12:12

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 Sep 30 2012 at 13:16

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

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

serf Sep 30 2012 at 13:20

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

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

xdenser Sep 30 2012 at 13:34

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

serf Sep 30 2012 at 17:17

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

arXangel Sep 30 2012 at 20:31

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

...

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

...

m_z Sep 30 2012 at 20:37

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

arXangel Sep 30 2012 at 20:40

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

m_z Sep 30 2012 at 20:48

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

arXangel Sep 30 2012 at 21:59

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

serf Sep 30 2012 at 21:01

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

arXangel Sep 30 2012 at 22:03

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

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

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

serf Sep 30 2012 at 22:20

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

arXangel Sep 30 2012 at 22:22

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

serf Sep 30 2012 at 22:27

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

arXangel Sep 30 2012 at 22:29

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

serf Sep 30 2012 at 22:32

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

xdenser Oct 1 2012 at 00:27

Зачем?

serf Oct 1 2012 at 02:41

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

xdenser Oct 1 2012 at 09:43

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

serf Oct 1 2012 at 13:17

Как-то так

trueCondition && (variable = someValue);

xdenser Sep 30 2012 at 13:32

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

z_z Sep 30 2012 at 17:47

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

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

arXangel Sep 30 2012 at 20:34

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

serjoga Sep 30 2012 at 21:00

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

Show the best of all time