Knockout获取数组元素索引的2种方法

缺乏、安全感 2022-07-15 07:48 171阅读 0赞

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

假设有这样的一个模型：

![复制代码][copycode.gif]

namespace UseIndex.Models
    {
        public class Student
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }
    }

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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);
            }
    
        }
    }

![复制代码][copycode.gif]

在Home/Index.cshtml中：

![复制代码][copycode.gif]

@{
        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 = 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="#" data-bind="click: $root.showItemIndex">点击显示索引</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>

![复制代码][copycode.gif]

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

运行：  
[![1][]][1 1]

[copycode.gif]: /images/20220715/2b750fdb678c483badaedc1d5889b79c.png
[1]: /images/20220715/8bacd9d2a2e94d4da7b210e94b1b8715.png
[1 1]: http://images.cnitblog.com/blog/417212/201407/162304382568790.png