当前位置: 乐呵网 > js学习网 > JavaScript教程 >

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

时间:2016-10-19 12:11来源:乐呵网提供 作者:乐呵网 点击:
例子: 关于text、visible、html、style的绑定 eg1: html head title/title script type=text/javascript src=js/knockout-3.1.0.js/script style t

例子: 关于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 h2today message:/h2 p data-bind=text: chosenMeal(),visible:chosenMeal

例子:

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


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>


总结:

css绑定:data-bind="css:{'className':addOrDel}"         // css绑定是增加或去掉一个css类

style绑定:data-bind="style:{color:' ',fontSize:' '}"

(责任编辑:admin)
------分隔线----------------------------
栏目列表
推荐内容