您的位置：首页 > Web前端 > JavaScript

KnockJs 绑定语法

2013-09-26 23:40 399 查看

按照汤姆大叔的教程，学习了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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航