KnockoutJS 3.X API 第四章之数据控制流with绑定


Posted in Javascript onOctober 10, 2016

with绑定的目的

使用with绑定的格式为data-bind=”with:attribute”,使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定。with绑定内部的所有元素将受到该上下文的约束。

当然,with绑定也可配合if或foreach绑定一起使用。

示例1

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
Latitude: <span data-bind="text: latitude"> </span>,
Longitude: <span data-bind="text: longitude"> </span>
</p>
<script type="text/javascript">
ko.applyBindings({
city: "London",
coords: {
latitude: 51.5001524,
longitude: -0.1262362
}
});
</script>

本例中,通过with直接绑定了coords监控属性,并在其内部直接调用了coords监控属性的内部属性。这里就体现了with绑定的特性。

示例2:一个互动的例子

KnockoutJS 3.X API 第四章之数据控制流with绑定

该例子中将使用with绑定动态添加和删除其绑定值为null/undefined或非null/undefined

UI源码:

<form data-bind="submit: getTweets">
Twitter account:
<input data-bind="value: twitterName" />
<button type="submit">Get tweets</button>
</form>
<div data-bind="with: resultData">
<h3>Recent tweets fetched at <span data-bind="text: retrievalDate"> </span></h3>
<ol data-bind="foreach: topTweets">
<li data-bind="text: text"></li>
</ol>
<button data-bind="click: $parent.clearResults">Clear tweets</button>
</div>

视图模型源码:

function AppViewModel() {
var self = this;
self.twitterName = ko.observable('@example');
self.resultData = ko.observable(); // No initial value
self.getTweets = function() {
var name = self.twitterName(),
simulatedResults = [
{ text: name + ' What a nice day.' },
{ text: name + ' Building some cool apps.' },
{ text: name + ' Just saw a famous celebrity eating lard. Yum.' }
];
self.resultData({ retrievalDate: new Date(), topTweets: simulatedResults });
}
self.clearResults = function() {
self.resultData(undefined);
}
}
ko.applyBindings(new AppViewModel());

备注:with的无容器绑定(虚拟绑定)

像if、foreach等的虚拟绑定一样,with绑定也一样。使用<!-- ko -->和<!-- /ko -->进行。

<ul>
<li>Header element</li>
<!-- ko with: outboundFlight -->
...
<!-- /ko -->
<!-- ko with: inboundFlight -->
...
<!-- /ko -->
</ul>

以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之数据控制流with绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
javascript实用方法总结
Feb 06 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
JS命令模式例子之菜单程序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 #Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 #Javascript
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
图解上海144收音机
2021/03/02 无线电
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python列表的常用操作方法小结
2016/05/21 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python实现随机漫步功能
2018/07/09 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python字符串及文本模式方法详解
2020/09/10 Python
工作的心得体会
2013/12/31 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年团委工作总结
2014/11/13 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技