KnockoutJS подписывается на изменения свойств с помощью Mapping Plugin
В любом случае я могу сказать, что плагин отображения нокаутов для подписки на все изменения свойств вызывает определенную функцию?
Я понимаю, что могу вручную подписаться на событие изменения свойства следующим образом:
var viewModel = {
name: ko.observable('foo'),
}
// subscribe manually here
viewModel.name.subscribe(function(newValue){
// do work
})
Я хотел бы иметь возможность в целом подписываться, так как мои модели просмотра могут отличаться, я не хочу жестко указывать имена свойств. Я создал функцию, которая делает это, но это может быть не лучший подход. Он работает во всех браузерах, кроме IE7 и ниже.
Здесь я беру viewmodel в качестве аргумента и пытаюсь задуматься о том, что он подписывается на свойства:
function subscribeToKO(data) {
$.each(data, function (property, value) {
if (getType(value) == "Object")
data[property] = subscribeToKO(value);
else if (getType(value) == "Array") {
$.each(value, function (index, item) {
item = subscribeToKO(item);
});
}
else {
if (value.subscribe) {
value.subscribe(function (newValue) {
// do work
});
}
}
});
return data;
}
Как я уже сказал, это работает, но поскольку я использую подключаемый модуль отображения, я надеялся, что есть крючок, который я мог бы использовать, чтобы предоставить ему функцию, которая будет в целом подписаться на изменения свойств.
Что-то вроде:
mapping = {
create: function(options){
options.data.subscribe(function(newValue){
// do work ???
});
}
}
ko.mapping.fromJS(viewModel, mapping);
Любые идеи?
Ответы
Ответ 1
Вот общий подход, основанный на грязный флаг Райана Нимейера.
Нажмите здесь для JsFiddle.
Html:
<ol>
<li>
Telephone : <input data-bind="value: telephone"/>
</li>
<li>
Address : <input data-bind="value: address"/>
</li>
</ol>
JavaScript:
var model = {
telephone: ko.observable('0294658963'),
address: ko.observable('167 New Crest Rd')
};
// knockout extension for creating a changed flag (similar to Ryan dirty flag except it resets itself after every change)
ko.changedFlag = function(root) {
var result = function() {};
var initialState = ko.observable(ko.toJSON(root));
result.isChanged = ko.dependentObservable(function() {
var changed = initialState() !== ko.toJSON(root);
if (changed) result.reset();
return changed;
});
result.reset = function() {
initialState(ko.toJSON(root));
};
return result;
};
// add changed flag property to the model
model.changedFlag = new ko.changedFlag(model);
// subscribe to changes
model.changedFlag.isChanged.subscribe(function(isChanged) {
if (isChanged) alert("model changed");
});
ko.applyBindings(model);
Ответ 2
Этот удобный маленький плагин довольно близок к тому, что вы сделали, но он имеет несколько опций и может работать над гораздо более широким набором требований, не требуя плагина Mapping:
https://github.com/ZiadJ/knockoutjs-reactor
В основном это позволяет вам написать такой код:
ko.watch(viewModel, function(target, trigger) {
// do work
});