• Knockout.js 组件


    Knockout.js是一个基于MVVM模式的轻量级的前端框架,有多轻?根据官网上面显示的最新版本v3.4.0,仅22kb。能够友好地处理数据模型和界面DOM的绑定,最重要的是,它的绑定是双向的,也就是说数据模型变化了,界面DOM上的数据也会跟着发生变化,反过来,界面DOM上的数据变化了,数据模型也会相应这个变化

    Knockout.js官网:http://knockoutjs.com

    Knockout.js开源地址:https://github.com/knockout/knockout

    MVVM模式:这是一种创建用户界面的设计模式,MVVM把它拆分成三块就是Model、View、ViewModel,Model就是数据模型,View就是我们的视图,ViewModel就是一个视图模型,用来绑定数据模型和视图上面的dom元素。

    实例

    官网下载knockout.js文件,然后引用到view页面里面

    <script src="~/scripts/knockout/knockout-3.4.0.js"></script>

    完整案例

    <!DOCTYPE html>
    <html>  
    <#include "../include.ftl">
    <head>  
        <meta charset="utf-8">  
        <title>test</title>
        <script src="${basePath}/scripts/jquery/jquery-1.9.0.min.js"></script>
        <script src="${basePath}/scripts/knockout/knockout-3.4.0.js"></script>
    </head> 
    <body>
    <div> 
        <!-- view视图里面定义绑定data-bind的标签 ;注意:对应input标签的文本,需要使用textinput,而普通标签的文本使用text即可。-->
            From:<label data-bind="text:From"></label><br />
            To:<input type="text" data-bind="textinput:To" />
        </div>
    
    </body>  
    </html>  
    <script type="text/javascript">
      //定义一个viewmodel:Name,Profession标签与html元素标签区分大小写
        var myViewModel = {
                From: "去了",
                To: "来了",
            };
      //需要激活knockout的绑定
        ko.applyBindings(myViewModel);
    </script>

    效果

    ko.applyBindings()方法有两个参数,第一个就是我们需要绑定的viewmodel
    第二个参数是一个可选参数,它表示viewmodel绑定的标签的作用域
    ko.applyBindings(myViewModel,document.getElementById("ID"));

    第二个参数限定了myViewModel的作用范围,也就是说,只有在id="lb_name"的标签上面绑定才会生效,如果第二个参数是div等容器标签,它表示该绑定的范围为该div下面的所有子标签。

    其他详看:http://www.cnblogs.com/landeanfen/p/5400654.html

  • 相关阅读:
    字符串转list
    vant下拉单选
    断点续传(上传)C#版
    7z压缩测试
    SQL SERVER查看表字段信息
    FTP安全组设置
    Unable to find @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest
    Charles 抓包使用教程
    董明珠语录
    京东 Vue3 组件库 nutui 3.0 发布,支持小程序开发
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/6019378.html
Copyright © 2020-2023  润新知