KnockJs 绑定语法
按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法。
相关的教程大家可以去看 汤姆大叔的博客。
由于没有环境,代码直接用记事本写的,可能比较乱,仅作个人备忘。
<html>
<head>
<title>绑定语法</title>
<script type="text/javascript" src="js/knockout-2.3.0.js" ></script>
<style>.css1{color: #0000ff;}</style>
</head>
<body>
<!-- Visible绑定语法 --> <div data-bind = "visible:pVisible" > Visible 绑定</div>
<div data-bind = "visible:strVisible().length > 0 " > 条件表达式 绑定 </div> <!-- text绑定语法 -->
<span data-bind = "text:pText" ></span> <br/>
<span data-bind = "text:fnText" ></span><br/>
<span data-bind = "text:htmlText" ></span><br/> <!-- HTML绑定语法 -->
<div data-bind = "html:pHtml" ></div><br/> <!-- CSS 绑定 -->
<span data-bind = "css:pCss" >CSS绑定</span> <br/> <!-- Style绑定 -->
<span data-bind = "style:{ color:pStyle} ">Style绑定</span><br/> <!-- attr绑定 -->
<a data-bind = "attr : {href:attrHref,text:attrText} " >百度</a><br/> <!-- Click绑定 -->
<button data-bind="click: pClick" >Click</button> <!-- Event绑定 -->
<div data-bind="event:{mouseover:pOver}" >Event 绑定 </div> <!-- Submit绑定 -->
<form data-bind = "submit:pSubmit" >
...<input type="text" value="" /> <br/>
<button type="submit" >Submit</button>
</form> <!-- enable/disable 绑定 -->
<input type='checkbox' data-bind="checked: pChecked"/>
<input type='text' data-bind="enable: pChecked" value="enable" />
<input type='text' data-bind="disable: pChecked" value="disable" /><br/> <!-- Value绑定 -->
afterkeydown:<input type="text" data-bind="value:pValue,valueUpdate:'afterkeydown'" />
change(默认):<input type="text" data-bind="value:pValue" />
keyup::<input type="text" data-bind="value:pValue,valueUpdate:'keyup'" />
keypress::<input type="text" data-bind="value:pValue,valueUpdate:'keypress'" /> <!-- Checked 绑定 -->
<div><input type="checkbox" value="t1" data-bind="checked: pCheckSections"/> Cherry</div>
<div><input type="checkbox" value="t2" data-bind="checked: pCheckSections"/> Almond</div>
<div><input type="checkbox" value="t3" data-bind="checked: pCheckSections"/> Eabjkkkk</div> <!-- Radio 绑定 -->
<div><input type="radio" name="flavorGroup" value="t1" data-bind="checked: pRadio"/> Cherry</div>
<div><input type="radio" name="flavorGroup" value="t2" data-bind="checked: pRadio"/> Almond</div>
<div><input type="radio" name="flavorGroup" value="t3" data-bind="checked: pRadio"/> Monosodium Glutamate</div> <!-- Select 绑定 -->
<select data-bind="options:pOption"></select>
<select data-bind="options:pOption,selectedOptions:pOptionSelected" multiple="true"></select>
<select data-bind="options:pOption2,optionsText:'name',value:pOption2Value,optionsCaption:'请选择'"></select>
<select data-bind="options:pOption2,optionsText:function(item){return item.name+' '+item.value},value:pOption2Value,optionsCaption:'请选择'"></select>
<input data-bind="value:pOption2Value()?pOption2Value().value:'未知' " /> <br/> <!-- uniqueName 绑定 -->
<input type='text' value='uniqueName绑定' data-bind="uniqueName:true" /> </body> <script type="text/javascript">
var viewModel={} ;
//Visible语法
viewModel.pVisible = ko.observable(true) ;
viewModel.strVisible = ko.observable("xxxxxxxx") ; //text绑定语法
viewModel.pText = ko.observable("text") ;
viewModel.fnText = ko.dependentObservable(function(){
return viewModel.pText().length == 0 ? "empty" : "something" ;
});
viewModel.htmlText = ko.observable("<b>font<b>") ; //html绑定
viewModel.pHtml = ko.observable("<b>HTML</b>") ; //CSS绑定
viewModel.pCss = ko.observable("css1") ; //style绑定
viewModel.pStyle = ko.observable("#0000ff") ; //attr绑定
viewModel.attrHref = ko.observable("http://www.baidu.com");
viewModel.attrText = ko.observable("百度"); //Click绑定
viewModel.pClick = function(event){
alert(111);
if(event.shiftKey) {
}
else{
}
}; //event绑定
viewModel.pOver = function(){
alert('over');
} //Submit绑定
viewModel.pSubmit = function(){
alert('Submit');
} //Disable/Enable绑定
viewModel.pChecked = ko.observable(true); //Value绑定
viewModel.pValue = ko.observable("test"); //checked绑定
viewModel.pCheckSections = ko.observableArray(["t1","t2"]);
viewModel.pCheckSections.push("t3"); //RadioButton绑定
viewModel.pRadio = ko.observable("t1"); //options绑定
viewModel.pOption = ko.observableArray(["法国","中国","西班牙"]);
viewModel.pOption.push("美国");
viewModel.pOptionSelected = ko.observable(["中国","西班牙"]);
var person = function(pname,pvalue){
this.name = pname;
this.value = pvalue;
}
viewModel.pOption2 = ko.observableArray([
new person("Key1","Value1"),
new person("Key2","Value2")
]);
viewModel.pOption2Value = ko.observable(); //应用ViewModel
ko.applyBindings(viewModel);
</script>
</html>
KnockJs 绑定语法的更多相关文章
- KnockoutJS 3.X API 第四章(14) 绑定语法细节
data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...
- KnockoutJS(3)-绑定语法
绑定语法大致分为2种: 1. 数据绑定(data-bind syntax) 2. 绑定上下文(Binding Context) 下面针对这2中绑定语法分别介绍一下 1. 绑定上下文(Binding C ...
- Knockout应用开发指南 第三章:绑定语法(3)
原文:Knockout应用开发指南 第三章:绑定语法(3) 12 value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...
- Knockout应用开发指南 第三章:绑定语法(2)
原文:Knockout应用开发指南 第三章:绑定语法(2) 7 click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...
- Knockout应用开发指南 第三章:绑定语法(1)
原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...
- KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法
注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...
- 【Vue.js】vue基础: 3种Class和Style绑定语法
凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...
- ko学习二,绑定语法
补充上个监控数组ko.observableArray() ko常用的绑定:text绑定,样式绑定,数据数组绑定. visible 绑定.属性绑定 1.visible绑定 <div data-bi ...
- KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定
本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...
随机推荐
- C语言数组篇(四)二维数组
二维数组声明: ][] ={{,,},{,,}; //两行 三列 二维数组在声明的时候可以不写行,但一定要写列 ] = {{,},{,,},{}}; //未声明的地方自动补零 二维 ...
- Git使用简单总结--源自廖雪峰网站
创建版本库git add加入到暂存区git commit -m" "加入到分支 时光机穿梭git satus查看仓库的当前状态git diff file 查看修改内容 版本回退HE ...
- 17-比赛1 B - 子串计算 Chef and his string challenge (string的运用)
Chef's best friend Jerry gives Chef a string A and wants to know the number of string A that can be ...
- 18式优雅你的Python
本文来自读者梁云同学的投稿,公众号:Python与算法之美 一,优雅你的Jupyter 1,更改Jupyter Notebook初始工作路径 平凡方法: 在cmd中输入jupyter notebook ...
- PHP.26-TP框架商城应用实例-后台3-商品修改、删除
商品修改{修改页一般与添加页有百分之九十的相似度} create($_POST,Model::MODEL_UPDATE):系统内置的数据操作包括Model::MODEL_INSERT(或者1)和Mod ...
- HDU 5293 Tree chain problem 树形DP
题意: 给出一棵\(n\)个节点的树和\(m\)条链,每条链有一个权值. 从中选出若干条链,两两不相交,并且使得权值之和最大. 分析: 题解 #include <cstdio> #incl ...
- Centos7 查看Mysql配置文件
my.cnf是mysql启动时加载的配置文件,一般会放在mysql的安装目录中,用户也可以放在其他目录加载. 安装mysql后,系统中会有多个my.cnf文件,有些是用于测试的. 使用locate m ...
- string函数Contains()实例
public bool Contains(string value)如果值参数出现在此字符串内,或者值为空字符串(“”),则为true; 否则为false using System; class Ex ...
- 《Android权威编程指南(The Big Nerd Ranch Guide)(第二版)》12.4挑战练习
本书第12章是讲解Dialog.12.4挑战练习是在CriminalIntent项目中,再增加一个TimePickerFragment的对话框fragment.通过在CrimeFragment用户界面 ...
- Djano之写api使用django_rest_framework【海瑞博客】
使用django rest framework 可以更快速和友好的编写api,当然网上有很多教程,对于高手来说相对很简单,对于新手来说,根本搞不明白.那是你没有搞明白你自己的职责,做为后端,我们只要提 ...