首页 > 代码库 > Knockout获取数组元素索引的2种方法,在MVC中实现
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 = 1, Name = "小明"}, new Student(){Id = 2, 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=http://www.mamicode.com/"~/Scripts/jquery-1.8.2.min.js"></script> <script src=http://www.mamicode.com/"~/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 = 0; 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=http://www.mamicode.com/"#" 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()
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。