javascript - Durandal : Widget's activate callback not behaving like a regular viewmodel's callback

Question

我有一个带有下拉列表的小部件，每次进入 View 时都需要刷新它。是否有我可以在小部件的 View 模型中使用的回调，每次使用小部件时都会调用它？行为与常规 View 模型的激活回调完全一样的东西。

每次加载父 View 时都不会调用小部件的激活函数:

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

};

但是每次调用 View 时都会调用父 View 模型的激活函数:

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

我想将关于 loadProducts 的逻辑从父 View 模型移动到小部件的 View 模型，并在小部件的 View 中使用来自小部件 View 模型的集合，而不是父 View 模型。更改自:

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

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

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

我将一个名为 productionRun 的 ko observable 从父 View 传递到小部件(我在 View 模型的设置参数中提供了它)。在父 View 模型中加载的小部件中有一个下拉列表。我想将加载操作从父 View 模型移动到小部件的 View 模型，并将绑定(bind)更改为:

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

收件人:

<select data-bind="options: products

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

这可能吗？我遵循了 Durandal 关于创建小部件的示例，但是激活回调仅被调用一次(http://durandaljs.com/documentation/Creating-A-Widget/)。我是 Hot Towel + Durandal + Breeze 的新手。谢谢。

Answer 1

从表面上看，您需要仔细检查您是如何实现原型(prototype)模式的。

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

此外，原型(prototype)方法需要在自执行函数中，以便在绑定(bind)即将发生之前附加，以便可以访问它们。

我举个例子:

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. 

确保你像我在原型(prototype)中那样返回你的父对象方法，就好像你在那里返回它们那样就结束了，你的原型(prototype)方法将不会被附加。

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

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

ko.applyBindings(myObj);

alert(myObj.joinProps());

感谢 durandal，您无需调用 applyBindings。只需确保返回等效于 myObj 即可。

希望对你有帮助