MobX выделяет следующие основные идеи в вашем приложении.
Вы видели их в предыдущем gist,
но давайте рассмотрим их более подробно.
(далее…)
Биндинг if позволяет контролировать появление в документе участка разметки (и применения внутри него data-bind атрибутов), только если указанное выражение оценивается как true (или true-подобное значение вроде не-null объекта или не пустой строки).
Контекст биндинга — это объект, содержащий данные от биндингов, на которые можно ссылаться. При применении биндингов, Knockout автоматически создает и управляет иерархией контекстов биндингов. Корневой уровень (англ. root level) иерархии указывает на параметр viewModel переданный в ko.applyBindings(viewModel). Затем, каждый раз при использовании биндингов для управления потоками данных, таких как with или foreach, которые создают дочерний контекст биндинга, указывающий на вложенные данные из модели представления. (далее…)
Биндинг foreach дублирует участок разметки для каждого элемента в массиве, и связывает каждую копию этой разметки с соответствующим элементом массива. Это особенно удобно для визуализации списков или таблиц.
Если предположить, что ваш массив является observable массивом, то когда позже вы добавите, удалите или измените порядок элементов в массиве, биндинг эффективно обновит интерфейс приложения для соответствия новому виду массива — вставляя или удаляя дополнительные копии разметки, или меняя порядок у существующих DOM-элементов, без затрагивания каких-либо других DOM-элементов. Это намного быстрее, нежели повторно генерировать весь код для foreach после каждого изменения массива.
Конечно, вы можете произвольно внедрять любое число биндингов foreach вместе с другими биндингами для контроля потока данных (англ. control-flow), такими как if и with.
Биндинг attr предоставляет общий способ установки значений для любых атрибутов у связанного DOM-элемента. Это удобно, чтобы например подставить значение атрибута title элемента, src у тега img или href у ссылки на основе значений вашей модели представления, и автоматически обновлять их, когда свойства модели меняются. (далее…)
Биндинг style добавляет или удаляет одно или более значений для стилей DOM-элемента. Это удобно, чтобы например подсветить какое-то значение красным цветом, если оно стало отрицательной величины, или установить ширину прогресс-бара для отображения изменений этого значения. (далее…)
Биндинг css добавляет или удаляет один или более именованных CSS классов к связанному DOM-элементу. Например, это полезно, когда нужно подсветить красным цветом какое-то значение, которое стало отрицательным. (далее…)
Биндинг html заставляет связанный DOM элемент отображать HTML значение вашего параметра.
Обычно, это полезно, когда значения в вашей модели представления являются строками с HTML разметкой, которые вы хотите визуализировать. (далее…)
Биндинг text заставляет связанный DOM элемент отображать текстовое значение вашего параметра.
Обычно, его полезно использовать с элементами вроде <span> или <em> которые традиционно используются для отображения текст, но технически, можно использовать этот биндинг с любым элементом. (далее…)
Биндинг visible заставляет скрыть или показать связанный DOM элемент в соответствии с переданным в биндинг значением. (далее…)