KnockJs 绑定语法
2024-08-29 03:25:40
按照汤姆大叔的教程,学习了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>
最新文章
- Java连接Oracle数据库开发银行管理系统【三、实现篇】
- 推荐一些mac 系统软件
- Java Web Cookie
- linux中deb怎样安装
- 观察者模式:关于通知的使用(NSNotificationCenter)
- V8::Arguments中This和Holder的区别
- cc2530 makefile简略分析 <;contiki学习之三>;
- class ResultServletContextListener implements ServletContextListener
- 【48】认识template元编程
- mount, findmnt,df命令
- Log4Qt 使用(二)
- JS 获取星期几的四种写法
- Cache类缓存
- asp.net MVC里的 ModelState使用方法
- Mysql数据库主从配置
- ListView 与ContextMenu的关联管理
- cesium加载纽约市3dtiles模型
- js中bind的用法,及与call和apply的区别
- vue环境配置
- JavaScript学习笔记之数组(二)
热门文章
- 浏览器进程/线程模型及JS运行机制
- 如果文件里是汉字的话,这地方seek括号里面只能是偶数
- Pandas 数据结构Series:基本概念及创建
- Apache Spark 2.2.0 中文文档
- Android学习记录(9)—Android之Matrix的用法
- 《Cracking the Coding Interview》——第8章:面向对象设计——题目1
- 《算法》C++代码 Dijkstra
- android压力测试monkey简单使用
- 【vim环境配置】在centos6.4上配置vim的一些零碎记录
- Python 3基础教程5-while循环语句