Динамические CSS стили в knockout

В knockoutjs достаточно удобная система шаблонизации, которая, кроме всего прочего, позволяет использовать вложенные шаблоны. В последний раз я столкнулся с ними, когда делал некоторое подобие CRUD на javascript. Кроме всего прочего мне потребовалась устанавливать стили тем элементам, которые создавались с помощью шаблонов. Причем информация о внешнем виде редактора и его полей хранится в прототипе конструктора.

В поисках решения я наткнулся на блог, который предлагает вот такое решение для динамического назначения стилей - How to use a computed observable in KnockoutJS CSS binding

На его основе я сделал небольшой, пример, который показывает код в действии

  1. function viewModel() {
  2. var self = this,
  3. defs = {
  4. name: "base",
  5. color: false,
  6. background: false,
  7. bold: true
  8. }
  9. ko.mapping.fromJS(defs, {}, self);
  10.  
  11. self.style = ko.computed(function() {
  12. return {
  13. red: self.color(),
  14. yellow: self.background(),
  15. bold: self.bold()
  16. };
  17. })
  18. };
  19.  
  20. $(function() {
  21. vm = new viewModel();
  22. ko.applyBindings(vm);
  23. });

Демо на jsfiddle

Читайте в блоге

Отладка mod_rewrite

Метки: js jsfiddle knockoutjs css

Комментарии:

Владимир Рыбаков @ 09.10.2012 22:45

Очередное тестирование комментариев
Tom van Enckevort @ 31.10.2012 19:41

Thanks for linking to my blog post. I managed to read yours by using Google Translate :)

KnockoutJS 2.2.0 which was released yesterday has better support for computed CSS bindings.
Владимир Рыбаков @ 09.11.2012 09:54

Thank you for good news about knockoutjs.

I am thinking about english version of my blog. But my English is not good now. I am working to improve it.

Войдите на сайт, чтобы оставить комментарий