3

私は問題に直面しています。ListViewWinJSコントロールをJSONオブジェクトを返すRESTfulサービスにバインドしようとしています。

これが私のデザインです（default.html）

<body>
    <button id="btnExample">REST Service</button>

    <div id="divDisplayItems" data-win-control="WinJS.Binding.Template">
        <div>

            <table border="1">
                <tr>
                    <td><b>PersonId</b></td>
                    <td><b>PersonName</b></td>                 
                </tr>
                <tr>
                    <td><h4 data-win-bind="innerText: PersonId"></h4></td>  
                    <td><h4 data-win-bind="innerText: PersonName"></h4></td> 
                </tr>
            </table>            
        </div>
    </div> 
    <div 
        id="basicListView" 
        style="width:250px;height:500px"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{itemDataSource :SourceData.itemList.dataSource, itemTemplate: select('#divDisplayItems'),layout : {type: WinJS.UI.ListLayout}}"
        >
    </div>
</body>

これが私のdefault.jsコードです

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());            
            document.getElementById("btnExample").addEventListener("click", JSonRecord, false);
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function JSonRecord(event) {

        WinJS
            .xhr(
                    { url: "URL/EmployeeList" }
                 )
            .then
                 (
                    function (response) {

                        var sourceData = JSON.parse(response.responseText);

                        var datalist = new WinJS.Binding.List(sourceData.EmployeeDetailsResult);

                        var dataMembers = { itemList: datalist };

                        WinJS.Namespace.define("SourceData", dataMembers);                       

                    }, function (error)
                    {
                        console.log(error);
                    }
                 );
    } 
    app.start();
})();

「btnExample」がcliekdである場合は常に、ListViewにデータを入力する必要があります。サービスは正常に機能しており、適切なデータを取得できます。しかし、ページを読み込もうとすると、クラッシュします。

コメントしたら

"data-win-options="{itemDataSource :SourceData.itemList.dataSource, itemTemplate: select('#divDisplayItems'),layout : {type: WinJS.UI.ListLayout}}"

少なくともページが読み込まれています。

問題は何ですか？データをListViewコントロールにバインドするにはどうすればよいですか？

ありがとう

4

3 に答える 3

2

ボタンをクリックするまで使用できないSourceData名前空間にListViewをバインドしています。したがって、実行時に未定義の値にバインドしようとしています。アクティブ化されたイベントの前に、js ファイルの先頭にSourceData名前空間を設定し、空のBinding Listで作成する必要があります。何かのようなもの...

WinJS.Namespace.define("SourceData", {
   itemList: new WinJS.Binding.List([]);
})

ボタン クリック ハンドルでは、アイテムを既存のリストに追加するか、新しいリストを作成して最初から割り当てることができます。

30 日、特に第 2 週の IIRC で見つけることができるいくつかの優れたチュートリアルがあります。

于 2012-12-25T16:01:34.343 に答える
2

ページを読み込んで ListView がバインドしようとすると、リストが存在しないため、クラッシュしています。Web サービスへの非同期呼び出しの後まで存在しません。これを修正するために必要なのは、WinJS.Binding.List を以前に宣言することだけです (おそらく、アプリ エイリアスの隣にある app.onactivated 行のすぐ上)。次に、データをフェッチするときに、結果を繰り返して、既存のリストにプッシュします。このような...

sourceData.EmployeeDetailsResult.forEach(function(r) {
    yourList.push(r);
}
于 2012-12-25T16:01:42.323 に答える
1

Default.js の 2 つの変更点

最初の変更

var app = WinJS.Application;

/* 行を挿入

WinJS.Namespace.define("SourceData", 
    {
        itemList: new WinJS.Binding.List([])
    })

*/

var アクティベーション = Windows.ApplicationModel.Activation;

2 回目の変更

function (response) 
{

  var sourceData = JSON.parse(response.responseText);                      
  var datalist = new WinJS.Binding.List(sourceData.EmployeeDetailsResult);

 <-- basicListView is the Name of the div where you are binding the datasource -->
  basicListView.winControl.itemDataSource = datalist.dataSource;                      

}

理解を深めるために、このビデオをご覧ください。

お役に立てれば

于 2012-12-26T02:43:50.743 に答える