动态添加一个 durandal 小部件

【问题标题】：dynamically add a durandal widget动态添加一个 durandal 小部件
【发布时间】：2013-09-05 02:23:18
【问题描述】：

动态添加小部件到页面的过程是什么？本质上，我在视图上有一个“添加小部件”按钮，该按钮连接到视图模型中的函数 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，但它没有呈现小部件，并且没有在小部件上调用激活。

我错过了什么？

【问题讨论】：

标签： widget durandal

【解决方案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 来显示。

【讨论】：