ko绑定----记录

最新推荐文章于 2021-06-20 01:27:42 发布

weixin_34202952

最新推荐文章于 2021-06-20 01:27:42 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/uzies/p/9649503.html

1.绑定变量

globalData = ko.observable({item:{}});

2.绑定html

ko.applyBindings(globalData, document.getElementById('_bindDemo'));

注：这里document可以不写，则默认绑定全局

3.对数据进行赋值，达到刷新页面的效果

globalData({item:data});

注：因为定义的item为空值，这里定义了一个data为item赋值

4.对–对象–使用foreach循环

<tbody data-bind="foreach: items">
    <tr>
        <td data-bind="text: framework"></td>
        <td data-bind="text: stars"></td>
    </tr>
</tbody>

注：这里的items一般使用Ajax对其赋值，Ajax返回JSON格式数据，当作为List集合返回时，可以绑定到items

success: function(data, textStatus, jqXHR){
            globalData({items:data});
        }

5.绑定普通数组循环到html

    <!--ko foreach:item.arr-->
    <div><span>随机数：</span><span data-bind="text: $data"></span></div>
    <!--/ko-->

使用注解简写循环的方式，$index--表示索引，$data--表示具体数据

6.小demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/knockout-3.4.0.js" ></script>
    </head>
    <body>
        <input type="button" value="dian" onclick="randomAve(0.3,0.3009)" />
        <div>
            <!--ko foreach:item.arr-->
            <div><span>随机数：</span><span data-bind="text: $data"></span></div>
            <!--/ko-->
            <div><span>总和：</span><span data-bind="text: item.sum"></span></div>
            <div><span>平均值</span><span data-bind="text: item.aveNum"></span></div>  
            <div><span>误差：</span><span data-bind="text: item.errorValue"></span></div>      
        </div>
        <script type="text/javascript">
            globalData = ko.observable({item:{}});
            ko.applyBindings(globalData);
            var data = {};

            function randomNum(min, max){
                num = Math.floor((min + Math.random() * ( (max+0.0001) - min)) * 10000) / 10000;
                return num;
            }

            function averageValue(arr){
                data.sum = arr[0] + arr[1] + arr[2];
                data.aveNum = Math.floor((data.sum / data.arr.length ) * 10000) / 10000;
                return  data.aveNum;
            }

            function randomAve(min, max){
                data.arr = [];
                for (var i = 0; i < 3 ; i++) {
                    data.arr[i] = randomNum(min, max);
                }
                data.aveNum = averageValue(data.arr);
                errorValue(min);
            }

            function errorValue(num){
                data.errorValue = (num - data.aveNum) / (data.aveNum * 100);
                console.log(data);
                globalData({item:data});
            }

        </script>
    </body>
</html>