Knockout获取数组元素索引的2种方法,在MVC中实现_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > Knockout获取数组元素索引的2种方法,在MVC中实现

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

 2014/7/17 2:51:18  Darren Ji  程序员俱乐部  我要评论(0)
  • 摘要:在遍历数组、集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法。假设有这样的一个模型:namespaceUseIndex.Models{publicclassStudent{publicintId{get;set;}publicstringName{get;set;}}}在HomeController中,先模拟一个Student的集合,在投影出Name属性的集合,最后以Json返回给前台视图。usingSystem.Collections.Generic
  • 标签: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="~/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。

 

运行:
1

 

总结

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

发表评论
用户名: 匿名