I write spa web site with durandal. Every thing was ok until I use widget. Widget do not update my model.
My widget viewmodel:
define([], function () {
var ctor = function () {
};
ctor.prototype.activate = function (settings) {
this.settings = settings;
};
ctor.prototype.attached = function () {
$('.datepicker').datepicker({
clearBtn: true,
todayBtn: true,
});
};
return ctor;
})
My widget view:
<div >
<input class="datepicker" data-bind="value: settings.datevalue"/>
</div>
Then I change my widget to this and it is work. Is there a better way to do this?
My widget viewmodel:
define([], function () {
var ctor = function () {
};
ctor.prototype.activate = function (settings) {
this.settings = settings;
var data = settings.data;
var property = settings.property;
this.datevalue = ko.computed({
read: function() {
return data[property];
},
write: function(value) {
data[property] = value;
}
});
};
ctor.prototype.attached = function () {
$('.datepicker').datepicker({
clearBtn: true,
todayBtn: true,
});
};
return ctor;
})
My widget view:
<div >
<input class="datepicker" data-bind="value: datevalue"/>
</div>
My viewmodel:
define(['services/datacontext'],
function (datacontext) {
var myViewModel = ko.observable();
var activate = function (id) {
if (id) {
datacontext.load(id).done(function (result) {
myViewModel (result);
});
}
return {
activate: activate,
myViewModel: myViewModel
}
});
My view:
<section data-bind="with: myViewModel">
<address>
<label for="code">Code:</label>
<input data-bind="value: code" />
</address>
<div>
<label for="expireDate">Expire Date :</label>
<span id="expireDate" data-bind="datepicker: { data: $data, prop:'expireDate'}"/>
</div>
ko.mapping.fromJS solve my problem and don't require this change.