html 绑定
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
html 绑定的更多相关文章
- ASP.NET Core MVC/WebAPi 模型绑定探索
前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- MVVM模式解析和在WPF中的实现(三)命令绑定
MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- 冒泡,setinterval,背景图的div绑定事件,匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
- Xamarin+Prism开发详解二:Xaml文件如何简单绑定Resources资源文件内容
我们知道在UWP里面有Resources文件xxx.resx,在Android里面有String.Xml文件等.那跨平台如何统一这些类别不一的资源文件以及Xaml设计文件如何绑定这些资源?应用支持多国 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- Html.DropDownLis绑定数据库
效果: 方法一: View: <div class="col-md-md-4"> <div class="input-group"> & ...
- ASP.NET MVC——模型绑定
这篇文章我们来讲讲模型绑定(Model Binding),其实在初步了解ASP.NET MVC之后,大家可能都会产生一个疑问,为什么URL片段最后会转换为例如int型或者其他类型的参数呢?这里就不得不 ...
- Spring MVC初始化参数绑定
初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法 使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型 proper ...
- SpringMVC初始化参数绑定--日期格式
一.初始化参数绑定[一种日期格式] 配置步骤: ①:在applicationcontext.xml中只需要配置一个包扫描器即可 <!-- 包扫描器 --> <context:comp ...
随机推荐
- iOS多语言备选机制
近期伊书突然接到一些外国用户的投诉,说伊书界面变成了中文,但他们系统语言不是中文,是法文俄文日文等,伊书只支持中文跟英文,在不支持系统所用语言的时候,理应会自动选用英文,不知为什么会选成了中文,经过艰 ...
- BinaryWriter
c#里的文件操作 fileInfo dir的一大堆属性不用说 地球人都知道(什么fileName,create() delete()) ,文件系统的概念很好理解的 文件读写也好理解(硬盘到内存 然后再 ...
- AFNETWorking3.x实战教程
上一篇文章介绍了优秀的第三方网络请求框架AFNETWorking2.0,本篇就通过一个实战例子来总结AFNetworking的使用. 本文参考http://www.raywenderlich.com/ ...
- scanf和scanfs的区别
scanf()函数是标准C中提供的标准输入函数,用以用户输入数据 scanf_s()函数是Microsoft公司VS开发工具提供的一个功能相同的安全标准输入函数,从vc++2005开始,VS系统提供了 ...
- Android高薪之路-Android程序员面试宝典
Android高薪之路-Android程序员面试宝典
- 【转】FFMPEG 库移植到 VC 需要的步骤
原文:http://blog.csdn.net/leixiaohua1020/article/details/12747899 在VC下使用FFMPEG编译好的库,不仅仅是把.h,.lib,.dll拷 ...
- SYN Cookie的原理和实现
本文主要内容:SYN Cookie的原理,以及它的内核实现. 内核版本:3.6 SYN Flood 下面这段介绍引用自[1]. SYN Flood是一种非常危险而常见的Dos攻击方式.到目 ...
- Android Context
http://www.cnblogs.com/android100/p/Android-Context.html
- Java Inner class && nested class
Java中,Inner Class(不被 static修饰)可以访问outer class 的所有成员(包括私有成员),同时,内部类 的创建必须经由外部类的实例! nested class 有stat ...
- Jul_31 PYTHON REGULAR EXPRESSIONS
1.Special Symbols and Characters 1.1 single regex 1 . ,Match any character(except \n) ^ ,Match start ...