Пример использования KnockoutJS

[deniamnet]

Фиолетовый скроллбар в поле исходника на странице с примером (http://knockoutjs.com/examples/helloWorld.html) — что это?

[pavlov_eugene]

Это впечатляет!

[rwz]

Хабрахабр уже давно научился нормально форматировать и подсвечивать код на джаваскрипте тегом source.

Переделайте, а то код практически нечитаемый.

[sugia]

Сегодня вечером около 22:00 по мск поправлю. Пока на работе.

[utk]

Если не ошибаюсь, первая статья по KnockoutJS на хабре. Спасибо!
Очень хорошо, что показали именно готовое решение, примеры на сайте раскрывают лишь отдельные аспекты, но не все вместе.

В свое время очень порадовала демонстрация KnockoutJS с MIX'а, channel9.msdn.com/Events/MIX/MIX11/FRM08, с чего и началось знакомство с технологией.

[utk]

Комментарий куда-то съелся. В общем, поздравляю с первой статьей на хабре по KnockoutJS. Отличная работа и удачно собранный пример.

А кавычки в коде поправить действительно надо ;)

[xdenser]

О сейчас как раз с ним ковыряюсь. Пытаюсь сделать динамическую подгрузку шаблонов и моделей.

<div>
	{{each(idx, menu) menus }}
	 <button  data-bind="click: click">${caption}</button>
	{{/each}}
</div>
<div id="sub-model-view" data-bind='template: {  name: currMenuTemplate } '>

var model = {
		menus:[
		       MenuItem('Услуги/Операции','eq-operations'),
		       MenuItem('Рабочие места','eq-workplaces')
		      ],	
		currMenuIdx: ko.observable(0),
		currMenuTemplate: function(){
			return model.menus[model.currMenuIdx()].template;	
		}
	};

function MenuItem(caption, template){
		var r = {
			caption: caption,
			template: template,
			click:  function(){ ActivateMenu( r ); } 
			};
		return r;
	};
	
	
	function ActivateMenu(mi){
		var i = model.menus.indexOf(mi);
		model.currMenuIdx(i);
		$.koApplication.loadModel('ui/js/eq/'+mi.template+'.js'); 
	}

Когда меняется currMenuIdx — меняется шаблон. Кстати, я пока не понял почему. Магия какая-то… Код подгрузки шаблона я не показал — там нет проблем. Так вот не могу понять как модель привязать к такому меняющемуся шаблону. Он обращается к основной модели и не находит там нужных свойств. Так пока писал у меня уже возникло несколько идей. Пойду проверять.

[xdenser]

Разобрался. В данном случае надо так делать:

<div id="sub-model-view" data-bind='template: {  name: currMenuTemplate, data: subModel } '>

и в модели

var model = {
    ...
		currMenuTemplate: function(){
			return model.menus[model.currMenuIdx()].template;	
		},
                subModel: {...} 
   ...
	};

и подгружать модель в subModel.

[Drinker]

Уже месяц с этой библиотекой. Пока доволен. Могу порекомендовать ссылочку на knockmeout.net — хорошие примеры, интересные разборы «полётов». На английском.

[slik]

Сразу говорю чтобы не пинали, статья прежде всего о KnockoutJS, но хотел бы добавить информации :)
Раз уж используется jQuery UI, то можно было бы данное «реальное боевое условие» и без KnockoutJS организовать, в jQuery UI уже давно делают или правильнее сказать доделывают работу с моделями и store. И кстати говоря никогда не работал KnockoutJS, но исходники местами очень похожи по логике своей :)
Собственно вот страничка с примерами.

[AndreyNagih]

А как у этого фреймворка с утечками памяти? Планирую сделать на нем приложение, работающее целый день. Не будет ли проблем?

[sugia]

Исходя из документации, если не планируется удалять из DOM корневой элемент, на который прицеплен KNockoutJS, то значимых утечек не должно быть. Однако я не имею такого опыта, было бы очень интересно узнать Ваш.

[bo883]

Наконец на хабре статья про knockout. Спасибо огромное порадовали, статья очень интересна прочел пару раз.
Зы: статья показалась написано как то «ломано».

[sugia]

Спасибо за отзыв! Если Вам не трудно, пожалуйста, отправьте в ЛС ломаные участки, я постараюсь с ними что-то сделать.