html 绑定


目的

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

 

例子

<div data-bind="html: details"></div> 

<script type="text/javascript">
var viewModel = {
details: ko.observable() // Initially blank
}; viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
// HTML content appears
</script>

 

参数

主参数

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

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

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

其它参数

 

注:关于HTML encoding

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

 

依赖性

除KO核心类库外,无依赖。

这个绑定的功能与text binding相对应,不同点为:

  • 控制DOM元素的innerHtml属性
  • 不会对内容进行Html编码,你可以定义自己的html标签注入进去

<script src ="js/knockout.js"></script>
<script src = "js/jquery-1.10.2"></script>

<div data-bind="html: details"></div>
<div data-bind="text: details"></div>

<script type="text/javascript">
var viewModel = {
details: ko.observable()
// Initially blank
};
viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
window.setInterval(function()
{
viewModel.details("<p style='color:red'>" + "now Time is " + new Date().getTime() + "</p>") ;
},1000);
// HTML content appears
ko.applyBindings(viewModel);
</script>

执行结果

now Time is 1439809372167

<p style='color:red'>now Time is 1439809372167</p>

html 绑定的更多相关文章

  1. ASP.NET Core MVC/WebAPi 模型绑定探索

    前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...

  2. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. MVVM模式解析和在WPF中的实现(三)命令绑定

    MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  4. 冒泡,setinterval,背景图的div绑定事件,匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  5. Xamarin+Prism开发详解二:Xaml文件如何简单绑定Resources资源文件内容

    我们知道在UWP里面有Resources文件xxx.resx,在Android里面有String.Xml文件等.那跨平台如何统一这些类别不一的资源文件以及Xaml设计文件如何绑定这些资源?应用支持多国 ...

  6. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  7. Html.DropDownLis绑定数据库

    效果: 方法一: View: <div class="col-md-md-4"> <div class="input-group"> & ...

  8. ASP.NET MVC——模型绑定

    这篇文章我们来讲讲模型绑定(Model Binding),其实在初步了解ASP.NET MVC之后,大家可能都会产生一个疑问,为什么URL片段最后会转换为例如int型或者其他类型的参数呢?这里就不得不 ...

  9. Spring MVC初始化参数绑定

    初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法  使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型   proper ...

  10. SpringMVC初始化参数绑定--日期格式

    一.初始化参数绑定[一种日期格式] 配置步骤: ①:在applicationcontext.xml中只需要配置一个包扫描器即可 <!-- 包扫描器 --> <context:comp ...

随机推荐

  1. iOS多语言备选机制

    近期伊书突然接到一些外国用户的投诉,说伊书界面变成了中文,但他们系统语言不是中文,是法文俄文日文等,伊书只支持中文跟英文,在不支持系统所用语言的时候,理应会自动选用英文,不知为什么会选成了中文,经过艰 ...

  2. BinaryWriter

    c#里的文件操作 fileInfo dir的一大堆属性不用说 地球人都知道(什么fileName,create() delete()) ,文件系统的概念很好理解的 文件读写也好理解(硬盘到内存 然后再 ...

  3. AFNETWorking3.x实战教程

    上一篇文章介绍了优秀的第三方网络请求框架AFNETWorking2.0,本篇就通过一个实战例子来总结AFNetworking的使用. 本文参考http://www.raywenderlich.com/ ...

  4. scanf和scanfs的区别

    scanf()函数是标准C中提供的标准输入函数,用以用户输入数据 scanf_s()函数是Microsoft公司VS开发工具提供的一个功能相同的安全标准输入函数,从vc++2005开始,VS系统提供了 ...

  5. Android高薪之路-Android程序员面试宝典

    Android高薪之路-Android程序员面试宝典

  6. 【转】FFMPEG 库移植到 VC 需要的步骤

    原文:http://blog.csdn.net/leixiaohua1020/article/details/12747899 在VC下使用FFMPEG编译好的库,不仅仅是把.h,.lib,.dll拷 ...

  7. SYN Cookie的原理和实现

          本文主要内容:SYN Cookie的原理,以及它的内核实现. 内核版本:3.6 SYN Flood 下面这段介绍引用自[1]. SYN Flood是一种非常危险而常见的Dos攻击方式.到目 ...

  8. Android Context

    http://www.cnblogs.com/android100/p/Android-Context.html

  9. Java Inner class && nested class

    Java中,Inner Class(不被 static修饰)可以访问outer class 的所有成员(包括私有成员),同时,内部类 的创建必须经由外部类的实例! nested class 有stat ...

  10. Jul_31 PYTHON REGULAR EXPRESSIONS

    1.Special Symbols and Characters 1.1 single regex 1 . ,Match any character(except \n) ^ ,Match start ...