Durandal:Widget的激活回调不像常规的viewmodel的回调

时间:2013-10-28 16:03:09

标签: javascript knockout.js breeze hottowel durandal-2.0

我有一个包含下拉列表的小部件,每次进入视图时都需要刷新。 我是否可以在小部件的viewmodel中使用回调,每次使用小部件时都会调用该回调?某些行为与常规viewmodel的激活回调完全相同。

每次加载父视图时都不会调用窗口小部件的activate函数:

ctor.prototype.activate = function (settings) {
    this.settings = settings;

};

但每次调用视图时都会调用父视图模型的activate函数:

    var activate = function (routeData) {
        var id = parseInt(routeData);
        return datacontext.getEntityByID('ProductionRun', id, productionRun)
                          .then(loadProducts)
                          .fail(queryFailed);
    };

我想将有关loadProducts的逻辑从父视图模型移动到窗口小部件的viewmodel,并在窗口小部件的视图中,使用窗口小部件的viewmodel中的集合,而不是父视图模型。 改变自:

<select data-bind="options: $parent.products, optionsText: 'name', optionsValue: 'productID', value: settings.productionRun().productID"></select>

要:

<select data-bind="options: products, optionsText: 'name', optionsValue: 'productID', value: settings.productionRun().productID"></select>

由于

====== 2013-10-29更新======

以下是App / widgets / productionRunDetails / viewmodel.js中的代码:

define([
    'durandal/app',
    'durandal/composition',
    'messaging',
    'services/datacontext',
    'services/datacontext.product'
], function (app, composition, messaging, datacontext, datacontext_product) {

    function myObject() {
        var productionRunStatuses = ko.observableArray(datacontext.lookups.productionRunStatuses);
        var isSaving = ko.observable(false);
        var hasChanges = ko.computed(function () {
            return datacontext.hasChanges();
        });
        var canSave = ko.computed(function () {
            return hasChanges() && !isSaving();
        });
        var saveProductionRunDetailsCommand = function () {
            isSaving(true);
            return datacontext.saveChanges().fin(complete);

            function complete() {
                isSaving(false);
                app.trigger(messaging.messages.productionRunDetailsWidget_saved, this);
            }
        }
        var cancelProductionRunDetailsCommand = function () {
            datacontext.cancelChanges();
        }

        var closeProductionRunDetailsCommand = function () {
            datacontext.cancelChanges();
        }


        var self = this;
        self.canSave = canSave;
        self.productionRunStatuses = productionRunStatuses;
        self.saveProductionRunDetailsCommand = saveProductionRunDetailsCommand;
        self.cancelProductionRunDetailsCommand = cancelProductionRunDetailsCommand;
        self.closeProductionRunDetailsCommand = closeProductionRunDetailsCommand;
    }

    myObject.prototype.activate = function (settings) {
        this.settings = settings; //This gets called once, during the whole life cycle of the widget
    };


    //myObject.prototype = (function () {
    //    var activate = function () {
    //    };
    //    return {
    //        activate: activate
    //    }
    //})(); // As soon as I add this code (myObject.prototype), the widget does not work.


    var myObj = new myObject();

    return myObj;
});

小部件在父视图中以这种方式实现:

<div data-bind="widget: {kind:'productionRunDetails', productionRun:productionRun}"></div>

我将一个名为productionRun的ko observable从父视图传递给窗口小部件(我在viewmodel中的settings参数中可用)。窗口小部件中有一个下拉列表,它在父视图模型中加载。我想将加载操作从父视图模型移动到窗口小部件的viewmodel,并从以下位置更改绑定:

<select data-bind="options: $parent.products, etc

要:

<select data-bind="options: products

但是为了做到这一点,我需要有一个激活回调,每次激活父视图模型时都会执行该回调(通过导航到该父视图)。

这可能吗?我按照Durandal关于创建小部件的示例,但激活回调只调用一次(http://durandaljs.com/documentation/Creating-A-Widget/)。 我是Hot Towel + Durandal + Breeze的新手。谢谢。

2 个答案:

答案 0 :(得分:0)

从外观上看,你需要仔细检查你如何实现原型模式。

当您使用durandal时,您将需要使用显示原型模式,以便可以进行绑定和激活。

此外,原型方法需要处于自动执行功能中,以便在即将发生绑定之前进行附加,以便可以访问它们。

在这里,我将向您展示一个例子:

function myObject(data){
    var self = this;
    self.prop1 = ko.observable(data.prop1);
    self.prop2 = ko.observable(data.prop2);
    self.joinProps = function(){
        return self.prop1() + self.prop2();
    };
}

myObject.prototype = (function(){
    var activate = function(){
        return this.prop1() + this.prop2();
    };
    return {
        activate: activate,
        joinProps: this.joinProps
    }
})(); // See the () and the end so they get executed. 

确保你返回你的父对象方法,就像我在原型中一样,就好像你将它们返回到那里那样结束并且你的prototyped方法不会被附加。

最后,您可以使用以下方法对此进行测试:

var myObj = new myObject({ 'prop1' : 1, 'prop2' : 2 });

ko.applyBindings(myObj);

alert(myObj.joinProps());

感谢durandal,您无需调用applyBindings。请确保返回相当于myObj的内容。

希望这有帮助

答案 1 :(得分:0)

必须撤回之前的答案,我认为这不是一个好的解决方案,因为事件将更新窗口小部件的所有实例。一个类似但更好的想法是使用observable来更新视图。在您的情况下,将id作为observable传递并订阅它将允许您在id更改时更新小部件。

this.routeData.id.subscribe(function () {
    //refresh data here
});