Knockout獲取陣列元素索引的2種方法
阿新 • • 發佈：2019-02-09
在遍歷陣列、集合的時候，通常要獲取元素的索引，本篇體驗使用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="~/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>
以上，$data是指當前集合元素。$root是指根context中的ViewModel。
執行：