无法使用“data-bind=source:”将 Kendo Mobile ListView 绑定到数据答案

【问题标题】：Unable to bind a Kendo Mobile ListView to data using "data-bind=source:"无法使用“data-bind=source:”将 Kendo Mobile ListView 绑定到数据
【发布时间】：2013-01-16 16:00:00
【问题描述】：

我正在尝试将列表视图绑定到 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>

【问题讨论】：

标签： javascript mobile mvvm kendo-ui

【解决方案1】：

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

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

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

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

自从rdata 被设置后，该集合应该触发 ListView 更新。

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

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

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

function dataInit(initEvt) {
    ContactViewModel.loadData();
    kendo.bind($(initEvt.view.element), ContactViewModel, kendo.mobile.ui);
}

【讨论】：