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

本文通过实例展示了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>

<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:' '}"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值