Блог

Главная - Вопросы по программированию - Knockout.js примеры до и после?

Knockout.js примеры до и после?

#javascript #jquery #knockout.js

#javascript #jquery #knockout.js

Вопрос:

Я учусь Knockout.js через онлайн-учебники, и хотя я понимаю их, я не до конца понимаю, как это облегчает задачу.

Например, хотя я понимаю это http://jsfiddle.net/rniemeyer/LkqTU / 

     this.firstName = ko.observable(first);

я не вижу, как это значительное улучшение по сравнению с чем-то подобным http://jsfiddle.net/rniemeyer/LkqTU / 

 function updateBox2() {  var x=document.getElementById("first1");
document.getElementById('full').innerText = x.value}

но это был, конечно, чрезвычайно простой пример. (Примеры кода здесь не слишком хороши, лучше проверить jsfiddle).

Итак, мой вопрос в том, есть ли у кого-нибудь примеры кода, в которых первый код выполняет действие с использованием обычного javascript, а второй делает то же самое, но на этот раз с использованием knockoutjs и ясно показывает, насколько это большое улучшение?

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

1. … Теперь напишите большое приложение, делая все вручную.

2. Обучение — это тяжелая работа и требует времени, немного поиграйте с knockoutjs. Небольшая подсказка, попробуйте использовать шаблоны, вам это покажется забавным.

3. Ознакомьтесь с плагином KO mapping , который действительно помог мне увидеть, где двусторонняя привязка KO может сэкономить мне много времени. Плагин сопоставления автоматически создает для вас большинство ваших наблюдаемых объектов.

Ответ №1:

Вместо того, чтобы пытаться сравнивать ванильный JavaScript с KnockoutJS, я бы попытался понять, как шаблон привязки данных упрощает разработку клиента.

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

С привязкой к данным вашему JavaScript редко потребуется манипулировать DOM, потому что правильная привязка KnockoutJS будет обрабатывать многое за вас и без вашего вмешательства.

Таким образом, вы концентрируете свои усилия на манипулировании моделью в ответ на изменения пользовательского интерфейса (вызываемые KnockoutJS). И пользовательский интерфейс автоматически меняется при смене модели.

Например, если вы привязываете вызываемый наблюдаемый массив items к представлению, подобному этому:

 <ol data-bind="foreach: items">
   <li data-bind="text: $data"></li>
</ol>

… и вы хотите показать 3 элемента в вашем представлении, речь идет только об этом:

 viewModel.items.push("Hello");
viewModel.items.push("world");
viewModel.items.push("!");

KnockoutJS добавляет новые <li /> элементы в ваш упорядоченный список, потому что пользовательский интерфейс реагирует на изменения всего items массива.

Теперь попробуйте использовать свой разум, быть бесформенным и быть как вода, и я почти уверен, что вы сможете сравнить, какая дополнительная работа потребуется без использования привязки данных, и сколько строк кода вы можете сэкономить в реальном проекте, используя этот подход!