如何在一个页面中多次组合相同的小部件

Question

我有一个小部件说widget/userInfo

我使用compose，在我的视图中多次加载这个小部件，如下所示：

index.js：

activate() {
  this.widget = {
        model: 'widgets/userinfo/viewmodel',
        view: 'widgets/userinfo/view.html',
        activationData: { userId: 1 }
    };
}

HTML：

<div>
    UserInfo: <div id="1" data-bind="compose: $root.userInfo"></div>
    UserInfo-2: <div id="2" data-bind="compose: $root.userInfo"></div>
</div>

当我像上面一样多次组合同一个小部件时，它只会加载最后一个 id="2" 的 div。但我想为两个 div 加载它

我用谷歌搜索了这个问题，但找不到解决方案

Answer 1

假设您正在谈论Durandal Widgets，并且小部件在应用程序启动时注册到widget.registerKind('userinfo')，我相信您应该使用这样的东西。

<div>
    UserInfo: <div id="1" data-bind="userinfo: {data: $root.userInfo}"></div>
    UserInfo-2: <div id="2" data-bind="userinfo: {data: $root.userInfo}"></div>
</div>