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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
基于React Native 0.52实现轮播图效果
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
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
导游词之包公祠
2019/11/25 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python