如何在另一個組件中有條件地添加組件

我正在測試Knockout的組件功能，並且迄今爲止已能夠成功地在幾個方案中使用它。現在我已經談到了一個我無法找到如何做的資源的場景。我想基於某個關鍵字在另一個組件內添加一個組件。下面是一些片段：如何在另一個組件中有條件地添加組件

模板父組件

<div id="container"> 
</div>

父組件視圖模式

define(["jquery", "knockout", "ko-postbox", "text!./parent.html"], function($, ko, kopost, template) { 

    function displayChildContent(value) { 
     switch (value.toLowerCase()) { 
      case "child": 
       // 
       // How to load child component? 
       // 
       break; 
      default: 
       break; 
     } 
    } 

    function ParentViewModel() { 
     ko.postbox.subscribe("child-click", function(newValue) { 
      displayChildContent(newValue); 
     }, this); 
    } 

    return { viewModel: ParentViewModel, template: template }; 
});

模板子組件

<div> 
    <h1>Child</h1> 
</div>

查看模型子組件

define(["text!./child.html"], function(template) { 

    function ChildViewModel() { 
    } 

    return { viewModel: ChildViewModel, template: template }; 
});

的點擊觸發，但我不知道如何添加父模板中的子模板。另外，我打算使用自定義元素的params綁定將一些數據從父項傳遞給子項。在將子模板添加到父項之後，它是否仍然可以這樣做？

來源

2015-08-08 g_b

在你的父組件添加相似的一行：

<!-- ko if: childTmpl --><!-- ko component: {name: 'child'} --><!-- /ko --><!-- /ko -->

其中childTmpl是布爾觀察到訂閱child-click。現在，如果您不想將名爲'child'的組件緊緊地綁定在父級內，這可能會帶來一些問題。在這種情況下，您仍然可以用父viewModel中的（n observable）屬性替換它，或者甚至動態地交替。這將成爲：

<!-- ko if: childTmpl --><!-- ko component: {name: childComp} --><!-- /ko --><!-- /ko -->

其中childComp是ParentViewModel一個屬性，您可以通過PARAMS /定值/觀察到的填充。下面是我與測試的樣品型號：

function ParentViewModel(params) { 
    this.childComp = params && params.child || 'child'; 
    this.childTmpl = ko.observable(true).subscribeTo("child-click"); 
} 

function ChildViewModel(params) { 
    this.buttonClicked = ko.observable(true).publishOn("child-click"); 
} 
ChildViewModel.prototype.toggle = function() { 
    this.buttonClicked(!this.buttonClicked()); 
};

在測試情況下，單擊在子組件的按鈕（其最初示出）觸發buttonClicked到false，然後更新childTmpl到false以及，除去子組件。這裏查看完整的小提琴：

http://jsfiddle.net/ohdodfzr/2/

至於你的第二個問題：

另外，我打算在使用PARAMS自定義元素的結合，從父母傳給子女的某些數據。

是的，你仍然可以這樣做。您甚至可以通過父級模板中的組件綁定來傳遞整個父級viewModel，例如：

<!-- ko component: {name: 'child', params: {parent: $data}} -->

來源

2015-08-08 17:16:12 Tyblitz

謝謝。由於不同的問題，我仍然無法工作，但我認爲你的解決方案是正確的。我現在面臨一個新問題。也許你可以看看（http://stackoverflow.com/questions/31899738/cant-bind-observable-inside-component-to-an-if-binding）？我仍然會將此標記爲答案，因爲我認爲這是做到這一點的正確方法。 –

@g_b我在第二個問題中看到了一些關於代碼的問題。第一個錯誤'[Object Object]'是因爲你傳遞了一個**實例**而不是構造函數。如果你的組件只有一個實例，你可以返回'viewModel：{instance：model}'，否則你必須在構造函數中設置郵箱訂閱（就像我在這裏做的那樣）。不知道郵箱是否直接訂閱，但是你應該在設置**模型之後設置**。也做了與requirejs＆postbox的東西＆我不得不設置'如果（！ko.postbox）ko.postbox = kopost;'它的工作，但不知道如果這裏很重要。 – Tyblitz

如何在另一個組件中有條件地添加組件

回答

相關問題