Knockout.Js官网学习（html绑定、css绑定）

Html绑定

html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。

简单示例

<div data-bind="html: details"></div> 
<script type="text/javascript">   
    var viewModel = {        
        details: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");

</script>

这样Html 的EM标签就会显示于此

KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

如果你传的是不是数字或者字符串（例如一个对象或者数组），那显示的文本将是yourParameter.toString()的等价内容。

关于HTML encoding

 因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全（比如显示用户输入的内容），那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。

Css绑定

 css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。（注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。）

简单示例

<p style="background: gray; color: #ffffff; font-size: 18pt;">Html绑定</p>

<script type="text/javascript">   
    var viewModel = {        
        details: ko.observable(),
        currentProfit: ko.observable(150000)
    };
    ko.applyBindings(viewModel);
    viewModel.currentProfit(-50);
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");

</script>  

运行后的效果为

记得还写了一个css样式

.profitWarning {
    color: red;
}

 该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。

  你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

   如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是，那CSS class将会只添加或者删除一次并且以后不在更新。

    你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。

应用的CSS class的名字不是合法的JavaScript变量命名

如果你想使用my-class class，你不能写成这样：

<div data-bind="css: { my-class: someValue }">...</div>

 因为my-class不是一个合法的命名。解决方案是：在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字（从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的）。例如

<div data-bind="css: { 'my-class': someValue }">...</div>

 

转载于:https://www.cnblogs.com/zxbzl/p/6004091.html