var HtmlBindingModel = function () {
var self = this;
self.simpleText = ko.observable("<i>这是一段简单的斜体文本Html</i>");
self.objectText = {
firstName: "kai",
lastName: "cui",
toString: function () {
return '<span style="color:blue;">这个对象自己重写了toString(' + this.firstName + ' ' + this.lastName + ')</span>';
}
};
self.objectText2 = {
firstName: "kai",
lastName: "cui"
};
};
ko.applyBindings(new HtmlBindingModel(), document.getElementById("Demo4"));
<h1>演示 KnockOut Html绑定</h1>
<hr />
<ul>
<li class="Point">
4、<b class="PointTitle">理解<span class="KeyWord">Html</span>绑定</b><br />
<ul class="PointDesc">
<li>绑定对应元素的innerHTML属性</li>
<li>如果是ko.observable的,则该绑定是双向的</li>
<li>如果绑定的不是一个整数或者字符,比如对象,则会调用对象的toString()方法</li>
</ul>
<div class="PointDemo" id="Demo4">
<span data-bind="html: simpleText"></span><br />
<span data-bind="html: objectText"></span><br />
这个对象没有定义toString<span data-bind="html: objectText2"></span>
</div>
<!--下面写一些特殊的提示信息-->
<div class="PSFrame">
注意绑定可以是object,会调toString()
</div>
<hr />
</li>
</ul>
<hr />
/*Demo�ļ���ʽ*/
body
{
background-color: #e3e5d4;
}
/* ֪ʶ�� */
.Point
{
margin: 20px,0,0,0;
}
/* ֪ʶ����� */
.PointTitle
{
color:#0d8d0d;
}
/* �ؼ��� */
.KeyWord
{
color:Red;
}
/* ֪ʶ������ */
.PointDesc
{
font-family: Arial;
font-size: 15px;
color:#09acb8;
}
.PointDesc li
{
margin: 10px,0,0,0;
}
/* ֪ʶ��Demo��� */
.PointDemo
{
border-style:double;
border-color:#dcd559;
min-height:100px;
font-family: Corbel;
font-size: 20px;
color: #00174f;
}
/* ��Ҫ������ʾ����Ϣ��� */
.PSFrame
{
border-style: dashed;
border-color:#78e6ef;
font-family: Corbel;
font-size: 20px;
font-style:italic;
color: #b86c00;
}
/* ������ʾ */
.error {
color:Red;
}
/* ********************************************************** */
/*��Ҫǿ������ʽ*/
.Notice
{
font-weight: bold;
font-family:Bodoni MT Black;
color: #cd0707;
}
/* ********************************************************** */
/*�������ʽ*/
input[type="text"]
{
min-width:250px;
}
select
{
min-width:400px;
}
External resources loaded into this fiddle: