0

我用 durandal 写 spa 网站。在我使用小部件之前，一切都很好。小部件不更新我的模型。

我的小部件视图模型：

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;
})

我的小部件视图：

<div >
<input class="datepicker" data-bind="value: settings.datevalue"/>
</div>

然后我把我的小部件改成这个，它就可以工作了。有一个更好的方法吗？

我的小部件视图模型：

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;
})

我的小部件视图：

<div >
<input class="datepicker" data-bind="value: datevalue"/>
</div>

我的视图模型：

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
    }
});

我的观点：

<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 解决了我的问题，不需要这个改变。

4

0 回答 0