（更新）knockout.js学习——1.1例子——绑定的详细语法

最新推荐文章于 2024-11-12 13:19:40 发布

转载最新推荐文章于 2024-11-12 13:19:40 发布 · 692 阅读

knockOut.js 专栏收录该内容

13 篇文章

订阅专栏

本文通过实例展示了Knockout.js中的多种数据绑定方法，包括text、visible、html、style等绑定方式，以及如何使用ko.dependentObservable进行属性监控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子：

关于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>

<style>

.addClass{font-size:20px;}

</style>

</head>

<body>

1、text,value,visible绑定：
<h2>today message，字符长度不超过6个显示:</h2>
<input type="text" data-bind="value:chosenMeal" />

<p><span data-bind="text: chosenMeal(),visible:chosenMeal().length<6"></span></p>
<p>价格输入,50分以下价格便宜：<input type="text" data-bind="value:price" /></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:' '}"