Question

我正在尝试在多个屏幕上使用单个小部件。但是我有一个问题，当我在另一个页面上加载此小部件的第二个实例然后尝试在第一个页面上再次使用第一个小部件时，此小部件内的选项卡不再导航（引导活动类确实切换到正确的选项卡只是内容没有切换）。

经过一段时间的调试后，我意识到当我尝试在不起作用的小部件中导航时，它实际上正在导航＆＃34;工作＆＃34;小部件。似乎是2个视图和1个视图模型没有正确通信。我认为这是因为Durandal认为它是在这个小部件的第二个实例上（不知道如何区分这两个）。

我正在使用bootstrap v3.0.1标签，并且我已经完成并使小部件中的所有标签ID特定于加载此小部件的每个页面。

可悲的是，我没有想法，也不知道如何解决这个问题。我们非常感谢您提供的任何帮助。

有没有我可以指定一个小部件没有cachedViews？下面代码中的绑定无效。

小部件实施：

Page 1: 

<div class="modal fade" id="id1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div data-bind="widget: {kind: 'productDetails', options: productDetailsWidgetOptions, cacheViews:false }"></div>
        </div>
    </div>
</div>

Page 2:  

<div class="modal fade" id="id2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div data-bind="widget: { kind: 'productDetails', options: productDetailsWidgetOptions, cacheViews:false }"></div>
        </div>
    </div>
</div>

这是在窗口小部件中返回的viewmodel代码：

 var vm = {

    //#region Durandal's callbacks
    activate: activate,
    attached: attached,
    deactivate: deactivate,
    canDeactivate: canDeactivate,
    //#endregion

    //#region Properties
    title: title,
    name: name,
    productCode: productCode,
    description: description,
    //#endregion

    //#region Commands
    saveProductDetailsCommand: saveProductDetailsCommand,
    cancelProductDetailsCommand: cancelProductDetailsCommand,
    //#endregion

    }

    return vm;

我尝试更改代码以返回一个不使其成为单例的函数。这给了我完全相同的结果，还有什么我可能会丢失或做错了吗？

 var vm = function(){
    //#region Durandal's callbacks
    this.activate = activate;
    this.attached = attached;
    this.deactivate = deactivate;
    this.canDeactivate = canDeactivate;
    //#endregion

    //#region Properties
    this.title = title;
    this.name = name;
    this.productCode = productCode;
    this.description = description;
    //#endregion

    //#region Commands
    this.saveProductDetailsCommand = saveProductDetailsCommand;
    this.cancelProductDetailsCommand = cancelProductDetailsCommand;
    //#endregion

};

return vm;

Answer 1

请务必在窗口小部件的viewModel中返回构造函数。如果您返回对象字面值，则表示您已创建单例模块，而不是基于实例的模块。请发布您的viewModel代码，以便我了解您如何设置小部件的viewModel。

<强> [编辑]

var vm = function(){
    //#region Properties
    this.title = title;
    this.name = name;
    this.productCode = productCode;
    this.description = description;
    //#endregion

    //#region Commands
    this.saveProductDetailsCommand = saveProductDetailsCommand;
    this.cancelProductDetailsCommand = cancelProductDetailsCommand;
    //#endregion

};

vm.prototype.activate = function () {}
vm.prototype.attached = function () {}
vm.prototype.compositionComplete = function () {}
vm.prototype.detached = function () {}
vm.prototype.deactivate = function () {}
vm.prototype.canDeactivate = function () {}

return vm;

另外，请不要忘记附上的define和功能。所以，完整的：

define(['knockout'], 
function(ko) { 
    var vm = function(){
        //#region Properties
        this.title = title;
        this.name = name;
        this.productCode = productCode;
        this.description = description;
        //#endregion

        //#region Commands
        this.saveProductDetailsCommand = saveProductDetailsCommand;
        this.cancelProductDetailsCommand = cancelProductDetailsCommand;
        //#endregion

    };

    vm.prototype.activate = function () {}
    vm.prototype.attached = function () {}
    vm.prototype.compositionComplete = function () {}
    vm.prototype.detached = function () {}
    vm.prototype.deactivate = function () {}
    vm.prototype.canDeactivate = function () {}

    return vm;
}

其他指示：

使用比＆＃34; vm＆＃34;更具描述性的名称为您的viewModel。如果您正在编写菜单小部件，请使用Pascal大小写将其命名为MenuWidget，并替换＆＃34; vm＆＃34;用这个名字。它将使调试变得更加容易
确保在视图中显示和更新的属性是Knockout observables（例如，将this.name = name;更改为this.name = ko.observable(name);
最好在activate处理程序中初始化您的observable，而不是在构造函数中（至少使用Durandal）

在多个页面上实现一个小部件Durandal 2.0

1 个答案: