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获取input表单值的代码
Apr 19 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
vue权限问题的完美解决方案
May 08 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
Vue中 axios delete请求参数操作
Aug 25 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python yield与实现方法代码分析
2018/02/06 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Python3获取cookie常用三种方案
2020/10/05 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
公司门卫的岗位职责
2014/02/19 职场文书
年终总结会议主持词
2014/03/17 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
党委班子对照检查材料
2014/08/19 职场文书
大一新生检讨书
2014/10/29 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
我的收音机情缘
2022/04/05 无线电
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技