2

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

每次加载父视图时都不会调用小部件的激活函数：

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

};

但是每次调用视图时都会调用父视图模型的激活函数：

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

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

<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 可观察对象从父视图传递给小部件（我在 viewmodel 的设置参数中可用）。在父视图模型中加载的小部件中有一个下拉列表。我想将加载操作从父视图模型移动到小部件的视图模型，并将绑定更改为：

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

至：

<select data-bind="options: products

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

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

4

2 回答 2

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.

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

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

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

ko.applyBindings(myObj);

alert(myObj.joinProps());

感谢 durandal，您无需调用 applyBindings。只要确保你返回你的 myObj 等价物。

希望这可以帮助

于 2013-10-28T23:29:56.153 回答
0

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

this.routeData.id.subscribe(function () {
    //refresh data here
});
于 2013-12-24T18:07:10.867 回答