原文:Knockout获取数组元素索引的2种方法,在MVC中实现

在遍历数组、集合的时候，通常要获取元素的索引，本篇体验使用Knockout获取索引的2种方法。

假设有这样的一个模型：

namespace UseIndex.Models

{

    public class Student

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }

}

在HomeController中，先模拟一个Student的集合，在投影出Name属性的集合，最后以Json返回给前台视图。

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

using UseIndex.Models;

namespace UseIndex.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public JsonResult GetStudentNames()

        {

            var students = new List<Student>()

            {

                new Student(){Id = , Name = "小明"},

                new Student(){Id = , Name = "啸天"}

            };

            var names = from student in students

                select new {student.Name};

            return Json(names, JsonRequestBehavior.AllowGet);

        }

    }

}

在Home/Index.cshtml中：

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/Scripts/knockout-2.2.0.js"></script>

    <script type="text/javascript">

        $(function() {

            var vm = new ViewModel();

            ko.applyBindings(vm);

            vm.init();

        });

        function ViewModel() {

            var self = this;

            self.items = ko.observableArray([]);

            self.showItemIndex = function(item, event) {

                var context = ko.contextFor(event.target); //获取绑定元素的上下文;event.target绑定View Model的DOM元素

                var index = context.$index();

                alert("当前索引是：" + index);

            };

            self.init = function() {

                $.getJSON('@Url.Action("GetStudentNames","Home")', function(data) {

                    var arr = [];

                    for (var i = ; i < data.length; i++) {

                        arr[i] = data[i].Name;

                    }

                    self.items(arr);

                });

            };

        }

    </script>

    <style type="text/css">

        //样式略

    </style>

</head>

<body>

    <div>

        <table>

            <thead>

                <tr>

                    <th>索引</th>

                    <th>编号</th>

                    <th>名称</th>

                    <th>在View Model中的索引</th>

                </tr>

            </thead>

            <tbody data-bind="foreach: items">

                <tr>

                    <td data-bind="text: $index"></td>

                    <td data-bind="text: $index() + 1"></td>

                    <td data-bind="text: $data"></td>

                    <td><a href="#" data-bind="click: $root.showItemIndex">点击显示索引</a></td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

以上，$data是指当前集合元素。$root是指根context中的ViewModel。

运行：

总结

获取集合或数组元素的索引序号有2种方式：
1、通过data-bind="text: $index"或data-bind="text: $index() + 1"
2、在View Model中通过方法来获得：先获取到上下文，再context.$index()

Knockout获取数组元素索引的2种方法,在MVC中实现的更多相关文章

  1. 自定义获取html元素对象的7种方法。

  2. PHP中获取文件扩展名的N种方法

    PHP中获取文件扩展名的N种方法 从网上收罗的,基本上就以下这几种方式: 第1种方法:function get_extension($file){substr(strrchr($file, '.'), ...

  3. 【JS新手教程】JS获取当前星期几的几种方法

    该文通过获取星期几的几种方法,介绍JS里的数组,判断,和字符串截取,可以当作新手教程看,小白也看的懂.获取星期几,可通过Date()对象的getDay()获取,获取的是一个数字,对应的是0,1,2,3 ...

  4. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  5. php数组合并有哪三种方法

    php数组合并有哪三种方法 一.总结 一句话总结:array_merge():array_merge_recursive():‘+'号 $a = array('color'=>'red',5,6 ...

  6. js中如何删除某个元素下面的所有子元素？（两种方法）

    js中如何删除某个元素下面的所有子元素?(两种方法) 一.总结 方法一:通过元素的innerHTML属性 元素element.innerHTML=""; 方法二:通过元素的remo ...

  7. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  8. MYSQL获取自增ID的四种方法

    MYSQL获取自增ID的四种方法 1. select max(id) from tablename 2.SELECT LAST_INSERT_ID() 函数 LAST_INSERT_ID 是与tabl ...

  9. Android获取APK包名的几种方法

    Android获取APK包名的几种方法:1.adb shell pm list package -f | findstr 关键字 #只能获取到包名,主Activity名无法获取到 2.使用aapt-- ...

随机推荐

  1. JDBC使用数据库来完成分页功能

    本篇讲诉如何在页面中通过操作数据库来完成数据显示的分页功能.当一个操作数据库进行查询的语句返回的结果集内容如果过多,那么内存极有可能溢出,所以在大数据的情况下分页是必须的.当然分页能通过很多种方式来实 ...

  2. 一次完整的HTTP请求所经历的7个步骤（前三步是浏览器工作，后四步是服务器工作）

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...

  3. delphi删除只读文件

    只读文件就是不能删除的文件,用DeleteFile函数对它来说是毫无意义的,要删除只读文件,只有先改变它的属性.如果你要删除一个文件,最好先作两个方面的考虑: (1)判断该文件的属性.可以用上面提到的 ...

  4. J2EE SSH学习（二）安装Eclipse插件和第一个Eclipse项目

    (一)安装Eclipse插件 Eclipse有很多功能很强大的插件,我现在作为一个菜鸟只知道插件的功能通常都很牛叉实用或者很有趣,那么该怎么安装Eclipse插件呢? 我使用的是Eclipse 4.3 ...

  5. 让notepad.exe的utf8不添加BOM

    实在是厌烦了notepad的utf8模式了,于是决定修改之,方案如下: 使用任何支持hex模式的编辑器打开%SystemRoot%/system32/notepad.exe查找二进制串56 8D 45 ...

  6. VS2005 MFC 预编译头文件来自编译器的早期版本，或者预编译头为 C++ 而在 C 中使用它(或相反)

    当 Visual C++ 项目启用了预编译头 (Precompiled header) 功能时,如果项目中同时混合有 .c 和 .cpp 源文件,则可能收到 C1853 编译器错误:fatal err ...

  7. MS Project 2007 工期、工时、资源、固定单位、固定工期、固定工时

    0. 基本概念 工期:指完成每项项目任务所经历的实际时间,及开始日期和结束时期之差.Project中,工期的默认单位是天. 工时:指将任务分配给资源后,每个资源执行任务的工作时间.Project中,工 ...

  8. jsonp与cors跨域的一些理解（转）

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  9. hdu 2594 Simpsons’ Hidden Talents 【KMP】

    题目链接:http://acm.acmcoder.com/showproblem.php?pid=2594 题意:求最长的串 同一时候是s1的前缀又是s2的后缀.输出子串和长度. 思路:kmp 代码: ...

  10. Spring配置DataSource数据源

    在Spring框架中有例如以下3种获得DataSource对象的方法: 1.从JNDI获得DataSource. 2.从第三方的连接池获得DataSource. 3.使用DriverManagerDa ...