例子:
关于text、visible、html、style的绑定
eg1:
<html>
<head>
<title></title>
<script type="text/javascript" src="js/knockout-3.1.0.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h2>today message:</h2>
<p data-bind="text: chosenMeal(),visible:chosenMeal().length>0"></p>
<p>价格:<span data-bind="text: pricerate"></span></p>
</body>
<script>
// 1、声明数据
var viewModel = {
chosenMeal: ko.observable("hi"),
price: ko.observable(110)
};
// 在ko.dependentObservable中已经指出了price()来源于viewmodel(第二个参数),指出了这个函数返回的就是price()的比较值大小。因此在html绑定中只需要写:text:pricerate。不能写成:pricerate(price()),这样写是没有根据的,并没有在pricerate函数中指出有参数。
//在使用ko.dependentObservable时,第二个参数指出了作用域范围是viewmodel中的属性或内容。在viemodel中不写这个函数的原因是:viemodel不能在内部进行自身引用。
viewModel.pricerate = ko.dependentObservable(function () {
return this.price() > 50 ? "expensive" : "cheap";
}, viewModel);
ko.applyBindings(viewModel);
</script>
</html>
改进例子2:
<html>
<head>
<title></title>
<style>
.addClass{font-size:20px;}
</style>
</head>
<body>
1、text,value,visible绑定:
<h2>today message,字符长度不超过6个显示:</h2>
<input type="text" data-bind="value:chosenMeal" />
<!--在text中绑定value值时,写的是chosenMeal。但是在span等元素中绑定text值时,写的是chosenMeal(),观测值是函数,应加上括号。text中不带括号原因不清楚。-->
<p><span data-bind="text: chosenMeal(),visible:chosenMeal().length<6"></span></p>
<p>价格输入,50分以下价格便宜:<input type="text" data-bind="value:price" /></p>
<!--两种方式进行价格判断,一种是用函数方式用ko.dependentObservable依赖监控属性的方式,一种是在html中直接判断-->
<p>价格1:<span data-bind="text: pricerate"></span></p>
<p>价格2:<span data-bind="text:price()>50 ? 'e':'c'"></span></p>
<h2>today message,字符长度不超过6个显示:</h2>
2、html绑定
<p>显示html代码标签后的效果:<span data-bind="html:htmlnode()"></span></p>
3、style绑定、css绑定:(javascript对象文字加上引号),对于font-weight这样的形式写成fontWeight
<p data-bind="css: { 'addClass': isclass }, style: { fontWeight: blacknot ,color:fontcolor}">是否增加class</p>
4、attr绑定
<a data-bind="attr: { href: ahref,title:atitle}">链接的绑定</a>
</body>
<script>
// 1、声明数据
var number = [1, 0];
var fontcolorlist =['red','black','blue'];
var viewModel = {
chosenMeal: ko.observable("abcde"),
price: ko.observable("100"),
htmlnode: ko.observable("<i>斜体</i>"),
isclass:ko.observable(number[0]),
blacknot: ko.observable("bold"),
fontcolor: ko.observable(fontcolorlist[2]),
ahref: ko.observable(""), // 写一个http地址
atitle:ko.observable("baidu")
};
viewModel.pricerate = ko.dependentObservable(function () {
return this.price() > 50 ? "expensive" : "cheap";
}, viewModel);
ko.applyBindings(viewModel);
</script>
</html>
总结:
html绑定:data-bind="html:'<i>code</i>' " // html绑定是把带有标签形式的html按标签进行转换,如带斜体标签的html以斜体字显示
css绑定:data-bind="css:{'className':addOrDel}" // css绑定是增加或去掉一个css类
style绑定:data-bind="style:{color:' ',fontSize:' '}"