knockout.js 组件内容答案

【问题标题】：knockout.js Components contentknockout.js 组件内容
【发布时间】：2014-10-27 13:57:29
【问题描述】：

我正在尝试使用 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>

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

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

文本“内容以 Html 代码形式出现在此处”应显示在样式类“ExpandButtonContent”的 div 中。有人知道如何做到这一点吗？

【问题讨论】：

标签： javascript html web knockout.js

【解决方案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>

【讨论】：

问题是，如何定义html应该显示在控件模板的哪个位置。