zoukankan      html  css  js  c++  java
  • 01knockout应用开发之遍历简单数据$Index、$data

    在knockout环境下,如何遍历一个简单的数组?对于遍历对象组件的数组来说,很容易,直接foreach:对象名,然后进行属性的绑定即可,而如下数据[10,20,30]这种简单的数组,如何去遍历呢?在阅读knockout官网后,找到了答案,如下实例:

    复制代码
     <label>博主</label>     <div data-bind="text:User.title"></div>     <label>地域</label><div data-bind="text:User.address"></div>     <label>所经历的等级  </label>     <ul data-bind="foreach:Level">         <li>索引:<span data-bind="text: $index"></span>,数值:<span data-bind="text: $data"></span></li>     </ul>     <label>所购买的  </label>     <div data-bind="foreach:SaleDetail">         [<span data-bind="text:id"></span>]&nbsp;&nbsp;<span data-bind="text:memo"></span>&nbsp;&nbsp;[<a href="javascript:;" data-bind="click:$parent.remove">移除</a>]<hr />     </div>     <script type="text/javascript">         var Demo = function () {             var self = this;             self.User = { title: "test knockout js", address: "beijing" };             self.Level = [10, 20, 30, 40, 50];             self.SaleDetail = ko.observableArray([                 { id: 1, memo: '2005-01,消费购买了水壶' },                 { id: 2, memo: '2006-03,消费购买了手机' },                 { id: 3, memo: '2006-10,消费购买了手机' }             ]);              for (var i = 0; i < 5; i++) {                 self.SaleDetail.push({ id: i + 4, memo: '2005-01,消费购买了水壶' })             }              self.remove = function () {                 self.SaleDetail.remove(this);             }         }          ko.applyBindings(new Demo());     </script>
    复制代码

    重要看一下HTML部分

    其中$index表示为组件的索引值,它从0开始,$data表示这个索引对应的具体的值,看一下程序运行结果的截图

     

  • 相关阅读:
    linux jdk1.8安装
    spring boot jar包 linux 部署
    mysql linux安装
    codesmith 三层架构
    数据库分库分表(sharding)系列(三) 关于使用框架还是自主开发以及sharding实现层面的考量
    android学习路线
    博客资源
    dotNET跨平台研究的相关文档
    Foundation框架—— 数组 (NSArray NSMutableArray )
    OC面向对象特性: 继承
  • 原文地址:https://www.cnblogs.com/duyao/p/4351336.html
Copyright © 2011-2022 走看看