4

リストビューをViewModelにバインドしようとしています。Webサービスに問題がないことを確認するために、ハードコードされたデータをコードに配置しました。コンソールエラーが表示されないため、この問題のトラブルシューティング方法がわかりません。

理想的には、ViewModelでデータを取得するためのコードをできるだけ多く使用し、KendoUIMobileフレームワークを使用する方法にできるだけ近づけたいと思います。

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

誰かが元の質問に反対票を投じた理由を知ることは興味深いでしょう..

これについては、私のブログ記事の 1 つであるKendo Mobile Gotchas, Tips, and Tricks で説明しています。

MVVM データ バインドは実際にはイベントの前に発生するため、バインドが発生するのはまだです。ただし、 rdata を設定するときに適切に呼び出すと、問題が解決する可能性があると思います。initContactViewModel.rdatanull.set()

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

が設定されているため、セットは ListView の更新をトリガーする必要がありrdataます。

それがうまくいかない場合は、非常にトリッキーになり、宣言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);
}
于 2013-02-02T02:19:50.780 に答える