Question

我正在尝试将listview绑定到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>

Answer 1

知道为什么有人对最初的问题进行投票会很有意思。

我在此处的一篇博文中介绍了这一点：Kendo Mobile Gotchas, Tips, and Tricks。

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

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

自设置rdata以来，该集应触发ListView更新。

如果这不起作用，那么你可以变得非常棘手，并且可以通过自己做{而不是init声明地延迟MVVM数据绑定直到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); }

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

1 个答案: