zoukankan      html  css  js  c++  java
  • 关于学习Knockoutjs--入门(二)

      这两天终于闲一丢丢了,可以有多点时间学习一下拉。接下来要写到的还是Knockoutjs。

      Knockout是建立在以下3个核心功能之上的:

      1、 属性监控与依赖跟踪

      2、 声明式绑定

      3、 模版机制

      Model-View-View Model (MVVM)是一种创建用户界面的设计模式。通过它只要将UI界面分成以下3个部分,就可以使复杂的界面变得简单(这个上一篇画过图,现在细讲一下):

      1、Model,用于存储应用程序数据,这些数据表示业务领域的对象和数据操作,并且独立于任何界面。

      2、View Model,纯粹用于描述数据内容和页面操作的数据模型。

      注意:这不是UI本身,它不具有任何按钮和显示样式的概念。这不是持久化的数据模型—它仅是用户当前使用的未保存的数据。当使用KO时,View Model(数据模型)是纯粹的不包含HTML知识的JavaScript对象,保持View Model(数据模型)抽象在使用时可以保持简单,因此可以更简单的操作管理更复杂的行为。

      3、View,代表View Model状态的一个可见、互动的UI界面。它主要用于显示View Model的数据信息、发送用户命令(例如,当用户点击按钮)以及在View Model发生变化时保持自动更新。

      使用KO时,View层主要就是简单的将HTML文档声明式的绑定到View Model,将它们关联起来。另外,也可以利用模版从View Model获取数据动态生成HTML。

       总结ko几种类型绑定:

      html绑定

      html绑定到DOM元素上,使得该元素显示的HTML值为绑定的参数。

      Visible绑定

      Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

      text绑定

      Visible绑定通过绑定一个值来确定DOM元素显示或隐藏

      css类名绑定

      css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。

      style属性绑定

      style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar。

      attr属性绑定

      这个绑定可以用于给DOM元素添加自定义属性,或绑定到已有的属性,attr 绑定提供了一种方式可以设置DOM元素的任何属性值。可以设置img的src属性,连接的href属性。使用绑定,当模型属性改变的时候,它会自动更新。

       foreath绑定

      使用此功能可以方便循环遍历输出某个数组、集合中的内容。

      if绑定

      (1)使用if binding可以控制某个组件动态显示,类似我们之前接触到的visible属性,不过此属性绑定过以后就不能更改,而if binding可以根据相应的条件控制组件是否显示

      (2)、也可以使用if来判断某个元素是否为null,如果为null则不会显示

      with绑定

      可以使用with binding来重新定义一个上下文绑定

      click绑定

      lick绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和连接a上,但是可以在任意元素上使用。

      event属性绑定

      event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress,mouseover和mouseout上。

      value属性绑定 

      value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

      当用户编辑表单控件的时候, view model对应的属性值会自动更新。同样,当更新view model属性的时候,相对应的元素值在页面上也会自动更新。

      注:如果在checkbox或者radio button上使用checked绑定来读取或者写入元素的 checked状态,而不是value 值的绑定。

      submit属性绑定

      submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

      当你使用submit绑定的时候, Knockout会阻止form表单默认的submit动作。换句话说,浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个,使用submit绑定就是为了处理view model的自定义函

      数的,而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作,你可以在你的submit句柄里返回true。

      好了学习的今天先写到这里,这段时间呢,事情特别多,脑子老是记不住,后来我发现了一个解决的办法,就是要做的东西,都整理起来,记好,然后清空大脑,再按照整理出来的一样一样做,效率也提高了,不过有的时候拖延症总犯,这个得

    赶紧克服!

  • 相关阅读:
    vue教程1-07 模板和过滤器
    vue教程1-06 v-bind属性、class和style
    vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
    Webstorm使用教程详解
    diff, cmp, patch
    grep, sed, awk
    which,whereis, locate, find
    tar, rar, unrar, zip, unzip
    groups, usermod, chown, chgrp, chmod
    pwd, cd, ls, touch, mkdir, rmdir, rm
  • 原文地址:https://www.cnblogs.com/sun927/p/5651126.html
Copyright © 2011-2022 走看看