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

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小部件，并且在应用程序启动时小部件是在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>