Question

我有一个包含下拉列表的小部件，每次进入视图时都需要刷新。我是否可以在小部件的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的新手。谢谢。

Answer 1

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

当您使用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的内容。

希望这有帮助

Answer 2

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

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

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

2 个答案: