knockout.js组件内容

Question

我正在尝试用Knockout.js创建一个自定义组件，我已经有了下面的代码片段：

控件的.js文件：

ko.components.register("expand-button",{
    viewModel: function(data)
    {
        this.header = data.header;

        this.image= data.image;

        this.displayContent = ko.observable(false);

        this.toogle = function()
        {
            if(this.displayContent()==true)
            {
                this.displayContent(false);
            }
            else
            {
                this.displayContent(true);
            }
        }
    },
    template: { require: 'text!controls/expand-button/expand-button.html'}
});
ko.applyBindings();

控件的模板：

<div class="ExpandButtonContainer">
    <div data-bind="click: toogle" class="ExpandButtonButtonInactive">
            <div class="ExpandButtonImage"><image data-bind="visible: image" src=""  /></div>
        <div data-bind="text: header">Header</div>
    </div>  
    <div class="ExpandButtonContent" data-bind="visible: displayContent() == true" data-part="content"></div>
</div>

现在我想向Control添加一个Html内容，所以如果我像这样使用Control：

<expand-button params="header: 'HEADER'">The Content goes here as Html code</expand-button>

文本"The Content goes here as Html“应该显示在带有样式类"ExpandButtonContent”的div中。有人知道如何做到这一点吗？

Answer 1

你有没有尝试过使用html绑定?例如http://knockoutjs.com/documentation/html-binding.html：

<expand-button params="header: 'HEADER'"><span data-bind="html: yourhtmlcontent"></span></expand-button>

或者如果你想要显示“文本”本身，

    <expand-button params="header: 'HEADER'"><pre data-bind="text: yourhtmlcontent"></pre></expand-button>