zoukankan      html  css  js  c++  java
  • knockoutjs 经验总结

    knockout的模式
    MVVM
    四大重要概念
    声明式绑定UI界面自动刷新依赖跟踪模版
    一些特点
    纯javascript类库
    可添加到web程序最上部
    简洁 才25kb
    兼容任何主流浏览器
    采用行为驱动开发
    快捷键的设置方法
    settings->keymap
    jQuery 和 knockout的 长处
    1. jQuery 擅长 元素操作 和 事件
    2. knockout 擅长  数据模型与用户UI界面进行关联
    data-bind
    文本 text
    按钮是否可点击 enable ; 但实际操作中发现得用这个  touch-events: none; pointer-events: none;
    激活knockout
    ko.applyBindings( viewModel , view ) ;这个view可以省略,
     
    当你在一个页面中声明了多个View Model来绑定不同的界面区域时,这样限制是很有好处的
    监控机制
    var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
    } ;
    计算属性
    fullName:ko.computed( function(){
       return this.personName + " " + this.personLastName ) ,}
    this  ) ;
    监控属性数组(observableArray)。
    myObservableArray.sort(  function(left, right) {
        return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1)
    })
     
    var myObservableArray = ko.observableArray();
     
    2 myObservableArray.push('Some value');
     
    有这些方法可用:pop unshift shift reverse splice remove removeAll
     
    observableArray :跟踪的是数组中的对象,而不是对象的状况。即observableArray 仅跟踪它拥有的对象,并且在对象被添加或者删除的时辰,通知listeners 。要监控对象的属性变更,须要编写自力的代码
    visible
    <div data-bind="visible: shouldShowMessage">
    <div data-bind="if: displayMessage">
    text html 的绑定
    html
    其它属性绑定 用 attr
    比如  <a data-bind="attr: { href: url, title: details }">
    在没有绑定属性的情况下使用foreach
      <!-- ko foreach: myItems -->         <li>Item <span data-bind="text: $data"></span></li>     <!-- /ko -->
    with
    要学会用 其实就是声明母对象
    as
    声明子对象的名字 举例:
    <ul data-bind="foreach: { data: categories, as: 'category' }">    
          <li>        
                 <ul data-bind="foreach: { data: items, as: 'item' }">            
                       <li>                
                             <span data-bind="text: category.name"></span>:              
                             <span data-bind="text: item"></span>            
                       </li>        
                  </ul>    
          </li>
    </ul>
    class其实是分开控制的
    <div class="tab-1 active" data-bind="click:navigateTo('bean'), css: {'active':$root.beanIsSelected"}></div>
     
    如果渲染绑定view的子级要不要加$root
    其实不用
    如果在html里给绑定的方法加参数了,有一种写法默认会执行一次,有一种写法不会
    click:navigateTo('star') 这种会默认执行一次
     
    click: function() { navigateTo('star') }  这种不会默认就执行一次
    判断class是否存在支持 !吗
     
    不支持css: {'active': !beanIsSelected}" 前面的这种写法是无效的
    要用这种写法:css: {'active': !beanIsSelected() }
    如何绑定图片地址
    <img data-bind="attr:{'src':oneitem.imgUrl}" />
     动态绑定高度的方法
    data-bind="style:{'height':$root.tabInnerHeight }"
     
    tabInnerHeight: ko.computed( function(){
     
        return (window.innerHeight * 0.6) + "px" ;}, this ),
    绑定方法的写法:
    navigateTo: this.navigateTo.bind( this ),
     
    $root
    基本上用不上 $root
    event binding
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
    其它绑定
    form 的 submitinput 的 value
    input 的 value 和 enable
        <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
    hasfocus
    <input data-bind="hasfocus: isSelected" />
    checked
    <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam"/></p>
    options
    <p>Destination country: <select data-bind="options: availableCountries"></select></p>
    selectedOptions
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
    上下文绑定
    #parent $parents $root $data $index $parentContext $context $element
    template绑定通过模板将数据render到页面
     
     
     
  • 相关阅读:
    【基础算法】- 全排列
    【基础算法】- 2分查找
    区块链培训
    Static Binding (Early Binding) vs Dynamic Binding (Late Binding)
    test
    No data is deployed on the contract address!
    "throw" is deprecated in favour of "revert()", "require()" and "assert()".
    Variable is declared as a storage pointer. Use an explicit "storage" keyword to silence this warning.
    京都行
    Failed to write genesis block: database already contains an incompatible
  • 原文地址:https://www.cnblogs.com/jason-beijing/p/10327925.html
Copyright © 2011-2022 走看看