• KnockoutJS(3)-绑定语法


    绑定语法大致分为2种:

    1. 数据绑定(data-bind syntax)

    2. 绑定上下文(Binding Context)

    下面针对这2中绑定语法分别介绍一下

    1. 绑定上下文(Binding Context)

    一个绑定语法由两部分组成:绑定的名字和值,他们之间使用“:”进行隔开。

    Today's message is: <span data-bind="text: myMessage"></span>
    View Code

    一个标签中我们可以使用多个绑定(多个绑定之间可以相关也可以不相关),此时这些绑定之间使用","进行隔开,比如:

    <!-- related bindings: valueUpdate is a parameter for value --> 
    Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" /> 
      
    <!-- unrelated bindings --> 
    Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />
    View Code

    绑定语法中的值可以是单个值,也可以是一个变量,也可以是一段文字,同时也可以是一段JavaScript代码,下面的这个例子展现的就是绑定语法中值得多样性:

    <!-- variable (usually a property of the current view model --> 
     <div data-bind="visible: shouldShowMessage">...</div> 
       
     <!-- comparison and conditional --> 
     The item is <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>. 
       
     <!-- function call and comparison --> 
     <button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button> 
       
     <!-- function expression --> 
     <div data-bind="click: function (data) { myFunction('param1', data) }">...</div> 
       
     <!-- object literal (with unquoted and quoted property names) --> 
     <div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">...</div>
    View Code

    如果我们在一个标签中绑定多个元素时,这些元素之间会互相影响的,此时我们在使用的时候要注意以下两点:

    (1)、绑定执行的顺序是从左向右的。

    (2)、当Model层的数据改变是,绑定到同一个标签上的值都会改变。

    2. 绑定上下文(Binding Context)

    一个Binding Context是一个对象,在他们中保存着数据,这些数据我们又可以在我们的绑定语法中去使用。当我们使用属性绑定时,Knockoutjs会自动的创建和管理具有等级之分的Binding Context。当我们使用ko.applyBindings(viewModel)的时候,Knockoutjs就会创建root等级指向viewModel的参数。接着,如果你使用了with或者foreach时,Knockoutjs就会创建child binding context指向嵌套的View Model Data。Binding Context为我们提供了以下的属性可供我们在绑定语法中任意使用。

    (1)、$parent

    这个视图模型对象代表了他的父上下文,代表当前上下文的外部。在root context中,此属性还没有进行定义。例如:

    <h1 data-bind="text: name"></h1> 
      
     <div data-bind="with: manager"> 
         <!-- Now we're inside a nested binding context --> 
         <span data-bind="text: name"></span> is the 
         manager of <span data-bind="text: $parent.name"></span> 
     </div>
    View Code

    (2)、$parents

    此属性代表了所有的parent属性。

    $parents[0]:代表的是上一个View Model,和$parent相同

    $parents[1]:代表的是上上一个View Model

    $parents[2]:代表的是上上上一个View Model

    这样依次往下推就行了。

    (3)、$root

    这个是最重要的view model object在root context中,是最上层的parent content,我们也可以使用$parents[$parents.length-1]替换。

    (4)、$data

    代表当前的view model,如果此时在根部的话,则$data和$root是相等的。如果你不想引用一个view model的属性而想引用一个view model本身时,

    $data则是非常有用的:

    <ul data-bind="foreach: ['cats', 'dogs', 'fish']"> 
        <li>The value is <span data-bind="text: $data"></span></li> 
    </ul>
    View Code

    (5)、$index

    此属性只在foreach标签中有用,他的值是从0开始的。

    (6)、$parentContext

    此标签和$parent是有区别的,$parent代表的是上层的view model,$parentContext代表的是上层的具体的数据,比如引用上层的index,使用$parentContext.$index。

    下面的两个标签在属性绑定时也是可以使用的,但他们并不是binding context中的一员。

    (1)、$context:指向当前的binding context object

    (2)、$element

    这是当前属性绑定的DOM对象,如果我们想要引用当前标签的属性值的时候我们则可以使用此属性。

    <div id="item1" data-bind="text: $element.id"></div>
    View Code
  • 相关阅读:
    排序算法——插入排序
    排序算法——选择排序
    排序算法——冒泡排序
    软件测试实例
    软件测试基础知识
    【数组】筛选数组arr中重复的元素,考虑时间复杂度
    【数组】最大子数组问题(要求时间复杂度最佳)
    【数组】合并两个排序数组
    【链表】循环链表插入元素
    P2668 斗地主 (NOIP 提高 2015)
  • 原文地址:https://www.cnblogs.com/birdwawe/p/4070719.html
Copyright © 2020-2023  润新知