4

我正在尝试将列表视图绑定到 ViewModel。我在代码中放置了一些硬编码数据，以确保它不是 Web 服务的问题。我没有看到任何控制台错误，所以我不知道如何解决这个问题。

理想情况下，我希望拥有尽可能多的代码来处理在 ViewModel 中获取数据，并且我希望尽可能接近您应该使用 KendoUI Mobile 框架的方式。

html

<div data-role="view" id="contactView" data-model="ContactViewModel" data-init="dataInit">
    <h1 id="ContactHallo">Contact Screen</h1>
    <ul id="contactDetailList" 
        data-role="listview" 
        data-style="inset" 
        data-template="contactDetailtemplate" 
        data-bind="source: rdata">
    </ul>
</div>

JavaScript

 var ContactViewModel = kendo.observable({
         rdata: null,

         loadData: function () {
             var testData = [
                                {
                                    AssociatedContactType: "n\/a",
                                    AssociatedProperties: [],
                                    EmailAddress: "n\/a",
                                    FName: "User1",
                                    HomeNumber: "n\/a",
                                    LName: "LastName",
                                    MobileNumber: "+27 21 0823219213",
                                    WorkNumber: "n\/a"
                                }];
             var loadedData = new kendo.data.DataSource.create({ data: testData });
             loadedData.read();

             this.rdata = loadedData;
         }
     });

     function dataInit() {
         ContactViewModel.loadData();
     }

     var app = new kendo.mobile.Application($(document.body));

模板

<div>
    <h4>Added Record</h4>
    <a href="tel:#:data.MobileNumber#">#:data.MobileNumber#</a>
</div>
4

1 回答 1

4

知道为什么有人对原始问题投了反对票会很有趣。

我在这里的一篇博文中对此进行了介绍：Kendo Mobile Gotchas, Tips, and Tricks。

MVVM 数据绑定实际上发生在事件之前，init所以当绑定发生时你ContactViewModel.rdata仍然是。null但是，我认为如果您.set()在设置 rdata 时正确调用，它可能会解决您的问题：

loadData: function () {
    ...
    this.set('rdata', loadedData);
}

该集合应触发 ListView 更新，因为rdata正在设置。

如果这不起作用，那么您可能会变得非常棘手并将 MVVM 数据绑定延迟到init事件发生，方法是自己执行而不是使用data-model声明方式。

为此，您将从视图中删除 data-model=属性，而是在函数kendo.bind()末尾手动调用，如下所示：init

<div data-role="view" id="contactView" data-init="dataInit">

function dataInit(initEvt) {
    ContactViewModel.loadData();
    kendo.bind($(initEvt.view.element), ContactViewModel, kendo.mobile.ui);
}
于 2013-02-02T02:19:50.780 回答