从 MVVM 读取列表视图数据答案

【问题标题】：Reading listview data from MVVM从 MVVM 读取列表视图数据
【发布时间】：2013-12-16 07:17:26
【问题描述】：

我正在使用 MVVM 学习 HTML5，我不知道获取列表点击事件记录 id 的方法名称，如果有人知道请帮助我，这是我的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
    <div data-model="mobileListViewModel" data-role="view" id="mobile-listview-events" data-title="ListView MVVM">
    <form data-bind="events: { submit: add }">
        <ul data-role="listview" data-style="inset" data-type="group">
            <li>
                <ul data-role="listview" data-bind="source: source, events { click: onClick }" data-template="template"></ul>
            </li>
        </ul>
    </form>
</div>

<script type="text/x-kendo-tmpl" id="template">
    <div>
        <lable>Name &nbsp;: </label>${name}</br>
      <lable>RegNo : </label> ${regno}
    </div>
</script>

<script>
    var mobileListViewModel = kendo.observable({
        source: [ {id:"1", name:"guna",regno:"1001"},{id:"2", name:"karthik",regno:"1002"},{time:"01:10",table:"3"} ],

        onClick: function(e) {
            // Here the problem, chrome says **Uncaught TypeError: Object #<Object> has no method 'select'** 
        var index = e.select().index(), // Here I want to get the index of selected list record
            dataItem = this.source.view()[index];
            alert("click", e);
        }
    });
</script>


<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

提前致谢。

【问题讨论】：

标签： c# android html mvvm

【解决方案1】：

您可以尝试以下方法（但是我无法对此进行测试）

var mobileListViewModel = kendo.observable({
    source: [ {id:"1", name:"guna",regno:"1001"},{id:"2", name:"karthik",regno:"1002"},{time:"01:10",table:"3"} ],

    onClick: function(e) {
        var index = $(e.item).index();
        dataItem = this.source.view()[index]; // or var dataItem = this.dataItem(e.item.index());
        alert("click", e);
    }
});

【讨论】：

Uncaught TypeError: Object [object Object] has no method 'view'朋友

【解决方案2】：

根据@geerubb 的建议，我可以阅读所选项目的索引，所以这个问题的答案是

var mobileListViewModel = kendo.observable({
        source: [ {id:1,name:"Guna",regno:"1001"},{id:2,name:"Karthik",regno:"1002"},{id:3,name:"Ravi",regno:"1003"} ],
        name: "Selvan",
        onClick: function(e){
            var index = $(e.item).index();
            //dataItem = this.source.view()[index]; // or var dataItem = this.dataItem(e.item.index());
            //alert("click", e);
            alert("ID: "+mobileListViewModel.source[index].id);
        }
});

使用此代码，我可以使用MVVM 从列表视图中读取所有数据。谢谢@geedubb。感谢所有尝试回答这个问题的人。

【讨论】：

很高兴为您提供帮助 - 抱歉，我无法测试我的解决方案