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

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

时间: 2025-01-04 03:44:43

html 绑定的相关文章

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

Linux双网卡绑定bond0详解

1 什么是bond 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在生产场景中是一种常用的技术.Kernels 2.4.12及以后的版本均供bonding模块,以前的版本可以通过patch实现.可以通过以下命令确定内核是否支持 bonding: [[email protected] network-scripts]#cat /boot/config-2.6.32-573.el6.x86_64 |grep -i bonding CONFIG_BONDING=

最新版勤哲Excel服务器V2016.12.0.292无限用户支持手机APP,微信,网页等功能不绑定电脑,任意安装,支持后续升级

最新版勤哲Excel服务器V2016.12.0.292无限用户支持手机APP,微信,网页等功能不绑定电脑,任意安装,支持后续升级. 这个版本发布过之后,再发布新的版本需要到下个月的中下旬,老朋友可以使用本版本后面延续升级 目前有大约127家用户在用,没有修改过注册授权文件,系统非常成熟,推荐指数为五星,QQ:619920289 麦枫论坛http://www.mfsun.com 简介 EXCEL服务器作为一款客户化.综合性管理软件,它通过Excel就能构造出您自主的管理系统:同时,她也可将您公司现

javascript绑定事件addEventListener与attachEvent

1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等. handle:事件句柄函数,即用来处理事件的函数: useCapture:Boolean类型,是否使用捕获,一般用false: 2.eleObj.at

vuejs学习笔记(1)--属性,事件绑定,ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });

自建List&lt;&gt;绑定ComboBox下拉框实现省市联动

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Data.SqlClient; namespace _04省市联动 { public partial cl

[原创]java WEB学习笔记48:其他的Servlet 监听器:域对象中属性的变更的事件监听器 (3 个),感知 Session 绑定的事件监听器(2个)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

过滤,绑定及动画

一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹配的元素 集合元素 :even 选取索引是偶数的所有元素(index 从0开始) 集合元素 :odd 选取索引是奇数的所有元素(index 从0开始) 单个元素 :eq(index) 选取索引等于index的元素 集合元素 :gt 选取索引大于index的元素 集合元素 :lt 选取索引小于index的元素 集合元素 :hea

JavaScript实现绑定DOM的定时器插件

问题 使用原生的setTimeout和setInterval仅仅能够实现, 定时执行事件处理函数, 在网页开发中, 往往会出现一种情况,定时器用于定时更新某个页面区域的数据, 往往在页面加载之后, 就启动这个定时器, 往后则间隔执行此定时器. 页面上定时刷新的区域可能会动态消失, 特别是在ajax被广泛使用的今天, 如果定时刷新的区域被删除了, 则定时器材也需要自动清除掉. 此二个接口,如果实现这种效果需要, 自己维护定时器句柄, 并且在处理定时器事件函数的时候, 首先判断 指定的刷新区域是否还