動態添加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來顯示事物。