4

テンプレートで提供されているhtmlにバインドするのではなく、JavaScriptメトロアプリでテーブルをバインドするのに問題があり、divのロードを入れてjsonを文字列としてレンダリングします。これは私が持っているものです:

<tr id="tableRow" data-win-control="WinJS.Binding.Template">
    <td data-win-bind="innerText: label"></td>
    <td data-win-bind="innerText: value"></td>
    <td></td>
</tr>

<table>
    <thead>
        <tr>
           <th>col1</th>
           <th>col2</th>
           <th>col3</th>
        </tr>
    </thead>     
    <tbody class="topContent" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></tbody>
</table>

バインドに使用している JavaScript (topContent は { label, value} オブジェクトのリストです:

function bindContent() {
    var list = new WinJS.Binding.List();

    topContent.forEach(function (item) {
        list.push(item);
    });

    var listView = document.querySelector(".topContent").winControl;
    var template = document.getElementById("tableRow");
    listView.layout = new ui.ListLayout();
    listView.itemTemplate = template;
    listView.itemDataSource = list.dataSource;
}
4

2 に答える 2

7

このようなa は使用できませんListView。コントロールは、そのListView作業を行うために余分な要素のスタック全体を追加します。これにより、テーブルの問題が発生します。

答えは、WinJS.Binding.Templateコントロールを直接操作し、それを使用してテーブル要素に行を挿入することです。テンプレートに必要な HTML は次のとおりです。

<table >
    <tbody id="myTemplate" data-win-control="WinJS.Binding.Template">
        <tr >
            <td data-win-bind="innerText: label"></td>
            <td data-win-bind="innerText: value"></td>
            <td></td>
        </tr>
    </tbody>
</table>

tbody添付されていない tr 要素を見つけたり、tbody 要素自体を挿入したりしてブラウザーが動揺しないように、完全なテーブルをマークアップに配置する必要があります。テンプレートの外側の要素は破棄trされるため、使用時にテンプレートから要素のみが生成されます。

生成された要素が挿入されるテーブルのマークアップを次に示します。これは、JavaScript からコンテンツを挿入する要素を見つけることができるように id 属性を追加したことを除いて、あなたが持っていたものです。

<table>
    <thead>
        <tr>
           <th>col1</th>
           <th>col2</th>
           <th>col2</th>
        </tr>
    </thead>     
    <tbody id="myTableBody">
    </tbody>
</table>

最後に、コードは次のとおりです。

WinJS.UI.processAll().then(function () {
    var tableBody = document.getElementById("myTableBody");
    var template = document.getElementById("myTemplate").winControl;

    topContent.forEach(function (item) {
        template.render(item, tableBody);
    });
});

Promiseテンプレートを使用する前に、返された byWinJS.UI.processAllが満たされていることを確認する必要があります。処理するアイテムごとにメソッドを呼び出しrenderます。引数は、データ バインディング用にテンプレートに渡すデータ アイテムと、生成された要素を挿入する DOM 要素です。

于 2012-06-19T18:26:39.757 に答える
0

processAll() promise 内で bindContent() 関数を呼び出していますか? そうでない場合は、次のことを試して、動作するかどうかを確認してください。

WinJS.UI.processAll().then(function () {
   bindContent();
};
于 2012-06-19T09:32:56.270 に答える