zoukankan      html  css  js  c++  java
  • knockoutJs基础1

     简单的knockoutjs实现

    1、knockoutJs是在MVVM的机制下实现的,所以要有view(HTML页面中的DOM标签)和viewModel(JavaScript中的js代码)。

    2、在view中通过data-bind进行数据绑定。

    3、在js中通过ko.observable()ko.applyBindings()方法进行绑定。

    4、过程

    (1)建立html页面 

    (2)引入jQuery库和knockoutjs库

    (3)建立html标签

    (4)js代码实现绑定

    
    
    <!DOCTYPE html>
    <html>
    <head>
    <script type='text/javascript' src='js/jquery-1.10.2.js'></script>
    <!--引入knockoutjs库,即knockoutJs安装--> 
    <script type='text/javascript' src='js/knockout.js'></script>
        <meta charset="UTF-8"/>
        <title>simple test</title>
    </head>
    <body>
    <!--view 绘制HTML页面,实现knockoutJs绑定<span data-bind="text:personName">  text用于显示文字, 显示名字和年龄-->
    The name is <span data-bind="text:personName"></span>
    <br>
    The age is <span data-bind="text:personAge"></span>
    <script type="text/javascript">
        //定义用户名和年龄
        var  name = "Bob";
        var age = 12;
        
        //给输出的内容进行赋值
        //ko.observable 提供参数的动态变化
        var myViewModel = {         
            personName: ko.observable(name),
            personAge: ko.observable(age)
        };
        //通过ko.applyBindings()方法进行绑定
        ko.applyBindings(myViewModel);
     </script>
    </div>
    </body>
    </html>
  • 相关阅读:
    Men and women can't be 'just friends
    thin-provisioning-tools
    自签名证书
    sqlite manager
    python -m SimpleHTTPServer 80801
    rsa or dsa?
    sl4a
    mtp
    sl4a
    基站记录仪是个啥?
  • 原文地址:https://www.cnblogs.com/jinling/p/4686936.html
Copyright © 2011-2022 走看看