原文: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. Qt中用正則表達式来推断Text的语种,主要通过推断unicode的编码范围

    QString MainWindow::ParseLanguage(QString Text) {     if(Text.length()<=0)     {         return & ...

  2. android布局margin和padding差异!

    事实上从使用的时候就能够差别开来. android:padding android:layout_margin padding是在本控件级别的,而margin是在layout级别的. 最好拿有背景的控 ...

  3. Qt Style Sheets Examples(QT真是有很全的文档)

    http://doc.qt.io/qt-5/stylesheet-examples.html http://doc.qt.io/qt-4.8/stylesheet.html

  4. 了解sota字符界面(章节4.1)

    4 SOTA操作 4.1 SOTA字符界面 sotaCC是字符界面管理sota系统程序 . 在/.../sota/bin/目录下,启动sotaCC.在终端的该目录下输入指令“./sotaCC”,启动s ...

  5. HDOJ 4883 TIANKENG’s restaurant

    称号: TIANKENG's restaurant Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Ja ...

  6. sap的示例代码

    sap的示例代码查看1.在SE38环境下的程序名输入栏输入'DEMO*'后按F4,你可以查到SAP所有的DEMO示例程序,好好看看,你会学到很多ABAP功能的实现方法.2.运行“ABAPDOCU”T- ...

  7. VC GDI双缓冲机制绘图防屏幕闪烁实现步骤

    在OnDraw(CDC* pDC) 中添加如下代码 CDC MemDC; //首先定义一个显示设备对象 CBitmap MemBitmap;//定义一个位图对象 //随后建立与屏幕显示兼容的内存显示设 ...

  8. C++中的对象指针

    指向对象的指针 在建立对象的时候,变异系统会给每一个对象分配一定的存储空间,以存放其成员. 对象空间的起始地址就是对象的指针.可以定义一个指针变量,用来存放对象的指针. 一个简单的示例1.1: #in ...

  9. leetCode 34.Search for a Range (搜索范围) 解题思路和方法

    Search for a Range Given a sorted array of integers, find the starting and ending position of a give ...

  10. CentOS6.4 编译安装Python 3.3.2 - CRPER木木

    基础环境: CentOS6.4(预装GCC,或者联网YUM---GCC编译写进这里太臃肿,找机会另外写一篇) Python 3.3.2     下载链接: http://www.python.org/ ...