Angular - самый впечатляющий игрок, которого я видел для двусторонней привязки данных.Вы можете использовать простые старые объекты JavaScript, прикрепить их к объекту области Angular, а затем привязать область к разделу DOM.Вот пример для Angular 0,9.(Angular 1.0 использует совершенно другой API для достижения того же.)
// angular.compile() returns a databinding function
var databind = angular.compile(document.documentElement);
var model = angular.scope();
// add data to the scope object
model.greeting = "Hello, World!";
model.colors = ["red", "green", "blue"];
// hook 'em up
databind(model);
Вы можете использовать угловые выражения в HTML для привязки данных, включая элементы управления формой.
<!DOCTYPE html>
<input name="greeting" />
<span ng:repeat="color in colors" style="color: {{color}}">
{{color}}
</span>
В этомВ этом случае свойство приветствия объектов области обновляется при каждом нажатии клавиши в текстовом поле.
Или, если вы не хотите использовать выражения привязки данных в своем HTML, вы можете сделать все вручную.
model.$watch("greeting", function (value) {
// when the greeting changes, update the DOM
$("input[name=greeting]").val(value);
});
Затем каждый раз, когда вы обновляете объект области действия и вызываете $ eval (), если что-то изменилось, слушатели будут уведомлены.
model.greeting = "Hi.";
model.$eval();
И самое приятное, что вы можете вносить изменения во что угодноприкрепленный к области, вызовите его метод $ eval (), и HTML автоматически обновится.
model.colors.append("yellow");
model.colors.sort();
model.$eval(); // notifies listeners, including bound HTML
Knockout JS уступает , поскольку вместо работы с простыми объектами JavaScript, массивами, строкамии числа, вы должны создать экземпляры классов Observable и ObservableArray для привязки данных.
Наслаждайтесь!