Question

动态地向窗口添加窗口小部件的过程是什么？基本上我在视图上有一个“添加窗口小部件”按钮，它连接到视图模型中的函数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来显示内容。

动态添加durandal小部件

1 个答案: