帶有數據綁定文本的敲除自定義組件

Question

我有一個自定義組件，我們稱之為mycomp ，它訪問它在其模板中傳遞的文本，如下所示：

<p>
    <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</p>

我在另一個組件中使用這個組件並嘗試像這樣向它傳遞文本：

<mycomp data-bind='text: myProperty'></mycomp>

當我嘗試運行它時，我得到

Unable to process binding "component: function(){return l}"
Message: Multiple bindings (text and component) are trying to control descendant bindings of the same element. You cannot use these bindings together on the same element.

有沒有辦法解決這個問題並做我想做的事情，即在另一個組件中使用一個組件並通過data-bind='text: ...'傳遞文本？

Answer 1

“文本”綁定僅在與原生 dom 元素（div、span 等）或虛擬元素一起使用時才有意義，因為它會使用指定的文本更改所有元素內容。

這就是錯誤消息所說的（“文本綁定”和組件本身都在嘗試更改內容）。

你的組件似乎輸出了所有的模板節點，所以我認為如果你這樣做的話它會起作用：

<mycomp>hello</mycomp>

---

更新后，我認為您有兩個選擇：

<mycomp>
    <!-- ko text: myProperty --><!-- /ko -->
</mycomp>

或者為您的組件創建自定義參數，以便您可以執行以下操作：

<mycomp params="text: myProperty"></mycomp>

關於如何做到這一點的詳細信息在這里=> https://knockoutjs.com/documentation/component-overview.html

在你的情況下，我認為它會是這樣的：

ko.components.register('mycomp', {
    viewModel: function(params) {
        this.text= params.text;
    },
    template:
        '<p data-bind="text: text"></p>'
});