当前位置: 首页 > 工具软件 > Knockout.js > 使用案例 >

knockout.js

胥英奕
2023-12-01

knockout.js是前端一个js库,实现了MVVM,knockout.js专注于数据的绑定,上手比较简单,只需学习一两天就可以使用!!!

2019-02-27  16:30:12

官方地址: http://knockoutjs.com/ 
中文API文档: http://www.aizhengli.com/knockoutjs/knockoutjs.html

一、knockout.js简介

knockout.js(简称ko)是一个JavaScript库,可帮助您使用干净的底层数据模型创建丰富,响应迅速的显示和编辑器用户界面。是实现了MVVM的一个轻量级前端框架。

二、ko的优点

1.KnockoutJS类库提供了简单和直接方式处理复杂的数据驱动接口。
2.使用纯Javasript类库并且可以和任何框架整合,它并不是jQuery类库的替代品, 但是可以作为高级特性的补充。
3.KnockoutJS类库文件非常轻量级。
4.KnockoutJS是独立的框架,兼容任何服务器或者客户端技术,KnockoutJS开源并且免费。
5.拥有完整的文档,官方的网站包含了API文档, 实际例子和互动教程等等。

三、ko的特点

1、优雅的依赖关系跟踪 - 在数据模型发生变化时自动更新UI的正确部分。简单说,就是当绑定的属性发生了变化时,UI自动更新对应的显示值。

2、声明性绑定 - 将UI的各个部分连接到数据模型的简单明了的方法。您可以使用任意嵌套的绑定上下文轻松构建复杂的动态UI。

3、简单可扩展 - 将自定义行为实现为新的声明性绑定,以便在几行代码中轻松重用。

四、ko的使用(开发工具自选可以是VS、webstrom)

1、导入ko相关库导入

<script src="/js/jquery.min.js"></script> 基础
<script src="/js/knockout-3.4.2.js"></script> 核心
<script src="/js/knockout.validation.min.js"></script> 校验

 2、声明

要使用KO创建视图模型,只需声明任何JavaScript对象。例如,

var myViewModel = {
    personName:'高司令',
    personAge:123
};

然后,您可以使用声明性绑定创建此视图模型的非常简单的视图。例如,以下标记显示personName值:

 

名称是<span data-bind =“text:personName”> </ span>

3、要激活Knockout,请将以下行添加到<script>块中:(将view modle激活)

ko.applyBindings(myViewModel);
 

 激活后,视图才能显示。

 

五、ko知识

1、event事件绑定

  <div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div>
    <div data-bind="visible: detailsEnabled"> Details </div>
  </div>
  <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
  <script type="text/javascript">
    var viewModel = {
      detailsEnabled: ko.observable(false),
      enableDetails:function() {
        this.detailsEnabled(true); //触发mouseover事件时,显示<div data-bind="visible: detailsEnabled"> Details </div>的内容
      },
      disableDetails:function () {
        this.detailsEnabled(false); //触发mouseout事件试试,隐藏<div data-bind="visible: detailsEnabled"> Details </div>的内容
      }
    };
    ko.applyBindings(viewModel);
  </script>

  就是通过在一个div上绑定两个事件,mouseover和mouseout。

  mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。

  mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。

2、submit绑定(适用于form元素)

  <form data-bind="submit: doSomething">
    ... form contents go here ...
    <button type="submit">Submit</button>
  </form>

  <script type="text/javascript">
    var viewModel = {
      doSomething : function(formElement) {
      // ... now do something
      }
    };
  </script>

3、value绑定适用于:input、select和textarea

  value的其他参数绑定:

  valueUpdate:input当是<input> or <textarea>时更新view
    valueUpdate:keyup,松开键盘的键
    valueUpdate:keypress,键盘的键按下
    valueUpdate:afterkeydown当开始键入一个字符粗发
    valueUpdate:valueAllowUnset,允许用户展现options中没有的值
4、click绑定
  
@{

      Layout = null;
    }
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <div>
      You've clicked <span data-bind="text: numberOfClicks"></span> times
      <button data-bind="click: incrementClickCounter">Click me</button>
    </div>

    <script type="text/javascript">
      var viewModel = {
        numberOfClicks: ko.observable(0),
        incrementClickCounter: function () {
          var previousCount = this.numberOfClicks();
          this.numberOfClicks(previousCount + 1);
        }
      };
      ko.applyBindings(viewModel);
    </script>

  每当你点击button按钮的时候,viewModel 里面的incrementClickCounter() 函数被调用,然后更新 numberOfClicks 的值,然后更新界面。

5、阻止事件冒泡,语法如下:
  <div data-bind="click: myDivHandler">
      <button data-bind="click: myButtonHandler, clickBubble: false">
          Click me
      </button>
  </div>

6、selectedOptions绑定:selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上。
  <p> Choose some countries you'd like to visit:

    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"> </select>
   </p>


   <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>
   <script type="text/javascript">
    var viewModel = {
      availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),
      chosenCountries: ko.observableArray(['Germany'])
    };
    ko.applyBindings(viewModel);
    viewModel.chosenCountries.push('France');
  </script>

7、Knockout绑定语法: 

  (1)、visible 绑定 ——-使得该元素的hidden和visible状态取决于绑定的值
  (2)、Text 绑定 ———使得该元素显示的文本值为绑定的参数(多用于显示上)
  (3)、Html 绑定 ———-使得该元素现实的html值为绑定的参数
  (4)、Css 绑定 ———-添加或删除一个或多个CSS 样式 至DOM元素上
  (5)、Style 绑定 ———-添加或删除一个或多个style样式 至DOM元素上
  (6)、attr 绑定 ———提供了一种方式可以设置DOM元素的任何属性(例如src、herf)
  (7)、Click 绑定 ———–在DOM元素上添加事件以便元素被点击的时候执行定义的JavaScript 函数(多用于button、input、a)
  (8)、Event 绑定 ———-在DOM元素上添加指定的事件以便元素被触发的时候执行定义的JavaScript 函数(多用于keypress,mouseover和mouseout上)
  (9)、Submit 绑定 ———-在from表单上添加指定的事件以便提交时执行javaScript函数(只能用于from元素)
  (10)、Enable 绑定 ———–使DOM元素只有在参数值为true时才enable(激活) (多用于input、select、textarea)
  (11)、Disable 绑定 ———–使DOM元素只有在参数值为true时才disable (禁用)(与上条用途一致)
  (12)、value 绑定 ———–关联DOM元素的值到view mode的属性上(与上条用途一致)
  (13)、Checked 绑定 ————关联到checkable的form表单控件到view model上
  (14)、Options 绑定 ———–控制什么样的options在下拉列表或者多选列表里,此绑定不能用于select之外的元素,关联的数据应为数组,select会遍历显示数组的所有的项
  (15)、SelectedOptions 绑定 ———用于控制多选列表已经被选择的元素,用在使用options绑定的select元素上
  (16)、UniqueName 绑定——–确保所有绑定的元素都有一个非空的name属性,如果该元素没有name属性,就给他设置一盒unique的字符串作为name属性


 
 
 

转载于:https://www.cnblogs.com/yuntaoTang/p/10445189.html

 类似资料: