按照汤姆大叔的教程，学习了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 绑定语法的更多相关文章

  1. KnockoutJS 3.X API 第四章(14) 绑定语法细节

    data-bind绑定语法 Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI. 绑定到简单的数据属性或使用单个绑定通常是容易和明显的. 对于更复杂的绑定,它有助于更好地了解 ...

  2. KnockoutJS(3)-绑定语法

    绑定语法大致分为2种: 1. 数据绑定(data-bind syntax) 2. 绑定上下文(Binding Context) 下面针对这2中绑定语法分别介绍一下 1. 绑定上下文(Binding C ...

  3. Knockout应用开发指南 第三章：绑定语法（3）

    原文:Knockout应用开发指南 第三章:绑定语法(3) 12   value 绑定 目的 value绑定是关联DOM元素的值到view model的属性上.主要是用在表单控件<input&g ...

  4. Knockout应用开发指南 第三章：绑定语法（2）

    原文:Knockout应用开发指南 第三章:绑定语法(2) 7   click 绑定 目的 click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数.大部分是用 ...

  5. Knockout应用开发指南 第三章：绑定语法（1）

    原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...

  6. KnockoutJS 3.X API 第五章 高级应用(5) 使用预处理扩展Knockout绑定语法

    注意:这是一种高级技术,通常仅在创建可重用绑定或扩展语法的库时使用. 这不是你通常需要做的时候使用Knockout构建应用程序. 从Knockout 3.0开始,开发人员可以通过提供在绑定过程中重写D ...

  7. 【Vue.js】vue基础： 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

  8. ko学习二，绑定语法

    补充上个监控数组ko.observableArray() ko常用的绑定:text绑定,样式绑定,数据数组绑定. visible 绑定.属性绑定 1.visible绑定 <div data-bi ...

  9. KnockoutJS 3.X API 第四章 数据绑定(5) 控制流component绑定

    本节目录: 一个例子 API 备注1:仅模板式的component 备注2:component虚拟绑定 备注3:传递标记到component绑定 内存管理 一个例子 First instance, w ...

随机推荐

  1. Python学习之set集合

    set集合以{}保存一组可迭代对象,如列表,字符串,set集合本身.集合内的元素若有重复的,将自动去除重复元素 a=set([1,2,3]) print(a) b=set('hello python' ...

  2. 使用泛型类简化ibatis系统架构

    jdk1.5的推出为我们带来了枚举.泛型.foreach循环.同步工具包等等好东西.其中,泛型的使用为我们的代码开发提供了很大的简便,简化了我们的代码. 1.设计思路 1)GenericDao泛型类提 ...

  3. 1196/P2323: [HNOI2006]公路修建问题

    1196: [HNOI2006]公路修建问题 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2191  Solved: 1258 Descriptio ...

  4. 剑指Offer - 九度1366 - 栈的压入、弹出序列

    剑指Offer - 九度1366 - 栈的压入.弹出序列2014-02-05 20:41 题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所 ...

  5. Django笔记 —— 视图

    最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

  6. sublime text基本配置备份

    sublime text基本配置备份: // Settings in here override those in "Default/Preferences.sublime-settings ...

  7. 手动实现一个lazyMan

    这应该算一个经典的面试题了,就是一个关于流程控制的问题,要求如下 //实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")//输出: //Hi! This ...

  8. flask 基础ssti注入

    源代码地址 (请用python2.7运行,python3有点出入) 注入点: 不是返回的静态模板而是反回模板字符串变得让客户端可以控制. XSS 这里直接 http://39.105.116.195: ...

  9. UnitOfWork知多少 【转】

    原文链接:https://www.cnblogs.com/sheng-jie/p/7416302.html 1. 引言 Maintains a list of objects affected by ...

  10. 【DNS】- 域名解析中A记录、CNAME、MX记录、NS记录的区别和联系

    1. A记录 又称IP指向,用户可以在此设置子域名并指向到自己的目标主机地址上,从而实现通过域名找到服务器.说明:·指向的目标主机地址类型只能使用IP地址: 附加说明: 1) 泛域名解析即将该域名所有 ...