动态添加durandal小部件

Question

将小部件动态添加到页面的过程是什么？ 本质上，我在视图上有一个“添加小部件”按钮，该按钮已连接到viewmodel中的功能addWidget（）。 基本上，当有人按下按钮时，我想动态创建一个durandal小部件的实例并将其添加到DOM。 我的代码如下所示：

    var addWidget = function () {

        var parent = $('<div></div>')
            .attr('data-bind', 'widget: { kind:\'myWidget\'}')
            .appendTo($('#dashboardContent'))
            .get(0);

        return widget.create(parent, { id: 'Hello World' });
    }

我可以在浏览器开发人员工具中看到，小部件HTML（视图）已添加到DOM中，但它没有呈现小部件，并且未在小部件上调用激活。

我想念什么？

Answer 1

从外观上，您正在尝试使用jQuery将小部件添加到DOM。 只是大声思考问题是：A：jQuery不知道激活是什么（由Durandal的路由器处理），B：什么都不会被正确绑定。 如果要添加小部件，为什么不创建一个包含小部件的observableArray并将其添加到其中呢？ 这听起来可能有点愚蠢，但我不确定最好的解决方法，但基本上看起来像这样

在您的视图模型中-

var myWidgets = observableArray();
myWidgets.push(someObjectsToComposeTheWidget);

在您看来-

<ul data-bind="foreach: myWidgets">
     <li data-bind="widget: {kind:'yourWidget', items: somethingGoesHere, headerProperty:'name'}">/div>
<ul>

这将使您能够动态添加和显示小部件，而不必陷入混乱并使用jQuery来显示事物。