0

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.

Afshin Alizadeh
  • 218
  • 3
  • 10
  • 1
    Could you please describe your problem in more detail? Currently it doesn't seem clear as to what isn't working... – PW Kad Mar 14 '14 at 14:17
  • I agree with @PWKad: You need to offer more detail and tell us what you have tried, where specifically you're having trouble. In the meantime, to do things the Durandal way, change your `attached` function to this: `ctor.prototype.attached = function(view) { $(view).find('datepicker').datepicker`, and so on. Use `view` to narrow your scope. –  Mar 14 '14 at 19:09
  • you right my description is not enough. I edit my question and complete it and use knockout.mappings.fromJS to solve my problem. @PWKad. – Afshin Alizadeh Mar 15 '14 at 21:14
  • 1
    @afshinalizadeh You should still follow my advice on the form of your ctor.prototype.attached function. – Eric Taylor –  Mar 16 '14 at 02:03

0 Answers0