• Knockoutjs属性绑定(Bindings)之流程控制(Control flow)


    一、foreach binding

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

    (1)、循环遍历输出数组

     
     
         
             
         
         
             
                 
                 
             
        
    First nameLast name
     


    (2)、动态增加和删除遍历节点
     

    
    
    

    People


    (3)、如果我们想要输出数组中的所有元素而不是像例一中使用firstName去指定元素的话,我们可以使用$data来进行输出。比如:
     

    
    
    
      data-bind="foreach: months">
    • The current item is:


          当然,我们也可以使用$data来调用数组中具体的元素,比如我们要使用$data调用例1中的firstName的话,我们可以使用$data.firstName来输出firstName。

    (4)、使用$index、$parent等其他的上下文属性
     

           我们曾在例2中使用了$index来表示我们数组的下标,$index是Knockoutjs为我们提供的属性,我们可以直接引用,它会随着数组等下标的变化动态变化的,比如如果数组的长度减少了1,$index的值也会跟着减少的。

          我们也可以使用$parent来使用foreach元素之外的属性,比如:

    • likes the blog post
             


         这里使用$parent来调用foreach循环体之外的blogPostTitle属性。

    (5)、使用"as"为foreach中的元素定义别名

         我们可以使用$data来代替数组中的元素,同时我们也可以使用as来为我们要遍历的元素起一个别名。

    
    
    
      • :

         
         在使用的时候我们要注意,起别名使用的是as:'category'而不是as:category。

    (6)、在没有绑定属性的情况下使用foreach

         有的时候我们想要循环输出一些特殊的内容,比如我们想要输入下面文本中的

  • 标签:

    • Header item
    • Item A
    • Item B
    • Item C


    如果我们想要循环输出上面代码中的

  • 标签的话,我们就没有一个可以绑定foreach的元素,此时我们可以通过以下的代码来实现:
     

    
    
    
    • Header item
    • Item


           我们使用来表示循环的开始和结束,这是一个虚拟的标签,Knockoutjs能够对其中的foreach进行绑定就好像你将foreach绑定到了一个真实的标签上一样。

    (7)、默认不显示被标示为删除的元素

           有的时候我们要跳过数组中的一些元素,此时这些元素已经被标示为删除,但并没有被真实删除,这些元素当我们使用foreach输出的时候是默认不显示的,如果我们想要这些元素显示的话,我们可以使用includeDestroyed这个选项,比如:
     

    ...


    二、if binding  和 if not binding

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

     

    
    
     
      
    
    Here is a message. Astonishing.


           此例根据checkbox是否勾选来控制是否显示下面的一个


    我们也可以使用if来判断某个元素是否为null,如果为null则不会显示,如下:

    
    
    
    • Planet:
      Capital:


            此例中如果capital为null,则不会进行显示。此时,如果没有if进行判断的话,则在使用capital.cityName时就会出错。

    (2)、if not binding的使用方法和if binding的使用方法一样,这里就不作介绍了。
     

    三、with binding

    我们可以使用with binding来重新定义一个上下文绑定,比如:

    
    
    

    with: coords"> Latitude: , Longitude:


          这样我们在使用coords下的latitude和longitude的时候我们就不需要使用coords.latitude来调用了,因为我们使用with:coords来指定了coords的上下文,当我们使用coords下面的属性时就可以直接使用了。
    下面提供一个动态交互的例子:

    
    
    
    Twitter account:

    Recent tweets fetched at

  • 相关阅读:
    18.Tornado_个人信息案例
    maven插件学习(maven-shade-plugin和maven-antrun-plugin插件)
    uniapp打包安卓apk的隐私政策配置
    测试C语言static关键字的作用
    普遍前端开发的接口交互和前端调用智能合约
    UML 类图几种关系(依赖、关联、泛化、实现、聚合、组合)及其对应代码
    paddle学习赛——钢铁目标检测(yolov5、ppyoloe+,Faster-RCNN)
    实现主成分分析 (PCA) 和独立成分分析 (ICA) (Matlab代码实现)
    Cookie与Session的区别及如何选择
    uniapp 自定义导航栏
  • 原文地址:https://blog.csdn.net/m0_72345017/article/details/127859646