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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
JavaScript实现猜数字游戏
May 20 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/04 星际争霸
PHP开发大型项目的一点经验
2006/10/09 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
jQuery $.extend()用法总结
2014/06/15 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
财经学院自荐信范文
2014/02/02 职场文书
八一建军节感言
2014/02/28 职场文书
校本课程教学计划
2015/01/19 职场文书
学年个人总结范文
2015/03/05 职场文书