我试图将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>I am trying to bind the listview to the ViewModel. I have placed some hard coded data into the code to ensure that it is not a problem with the web services. I am not seeing any console errors so I am at a loss for how to troubleshoot this problem.
Ideally I would want to have as much of the code dealing with getting the data in the ViewModel, and I want to stay as close as possible to the way that you are supposed to use the KendoUI Mobile framework.
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));Template
<div> <h4>Added Record</h4> <a href="tel:#:data.MobileNumber#">#:data.MobileNumber#</a> </div>最满意答案
知道为什么有人对原始问题进行投票会很有趣。
我在这里的一篇博文中介绍了这个： Kendo Mobile Gotchas，Tips和Tricks 。
MVVM数据绑定实际上发生在 init事件之前 ，因此当绑定发生时， ContactViewModel.rdata仍然为null 。 但是，我认为如果在设置rdata时正确调用.set() ，它可能会解决您的问题：
loadData: function () { ... this.set('rdata', loadedData); }自设置rdata以来，该集应触发ListView更新。
如果这不起作用，那么你可以变得非常棘手并且通过自己动手而不是以声明方式使用data-model来延迟MVVM数据绑定直到init事件。
为此，您将从视图中删除 data-model= attribute，而是在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); }It would be interesting to know why someone down-voted the original question..
I cover this in one of my blog posts here: Kendo Mobile Gotchas, Tips, and Tricks.
The MVVM data bind actually happens before the init event, so your ContactViewModel.rdata is still null when the bind happens. However, I think if you properly call .set() when setting rdata, it might fix your issue:
loadData: function () { ... this.set('rdata', loadedData); }The set should trigger the ListView to update since rdata is being set.
If that doesn't work, then you can get really tricky and delay the MVVM data bind until the init event by doing it yourself instead of using data-model declaratively.
To do that, you would remove data-model= attribute from your view, and instead manually call kendo.bind() at the end of your init function, like this:
<div data-role="view" id="contactView" data-init="dataInit"> function dataInit(initEvt) { ContactViewModel.loadData(); kendo.bind($(initEvt.view.element), ContactViewModel, kendo.mobile.ui); }更多推荐
发布评论