3

Windows 8アプリで情報を配列に表示するのに問題があります。これを使用して、ビューに情報を送信します。

var details = document.querySelector(".articlesection");

var data = [{
    "id": "1",
    "title": "Title text",
    "files": [
        {
            "id": "1",
            "title": "File1"
        },
        {
            "id": "2",
            "title": "File2"
        }
    ]
}];


binding.processAll(details, data);

このようなビューでデータを受け取ります（これは機能しますが、ファイル配列から情報を取得できません）

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
</div>

配列内の2つのオブジェクトを表示するにはどうすればよいですか？やってみたら

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
    <p data-win-bind="textContent: files">
        <!-- i get [Object object], [Object object] -->
    </p>
</div>

明らかにここにいくつかのデータがあります。このようにしたい場合、どうすればそれを行うことができますか。（Foreachは存在しませんが、自分のやりたいことを示したかったのです）

<div class="articlesection">
    <h2 data-win-bind="textContent: title">
        <!-- Displays 1 -->
    </h2>
    <h3 data-win-bind="textContent: id">
        <!-- Displays "Title text" -->
    </h3>
    <ul data-win-bind: foreach: files>
        <!-- Foreach all files, how can I do this? Foreach doesn't exist. -->
        <li>
            <span data-win-bind="textContent: id"></span> 
            <span data-win-bind="textContent: title"></span>
        </li>
    </ul>
</div>

よろしく、ジム

4

2 に答える 2

1

WinJS.UI.ListViewコントロールを使用します。

列車からこれを書いたので編集してください: WinJS ListViewコントロールは、オブジェクトのリストを表示するために使用するものです。このコントロールを使用すると、レイアウトのタイプ (リストまたはグリッド レイアウト) を示し、アイテムがタップされたときに何が起こるか (もしあれば) に関する動作を定義できます。アイテムごとに itemTemplate を提供するか、アイテムに応じてあらゆる種類のさまざまな魔法のものをレンダリングするカスタム テンプレート関数を作成できます。

これは、使用方法の簡単なサンプルです。

<div id='lv' data-win-control='WinJS.UI.ListView' />

var lv = $('#lv')[0].winControl;
var data = ...; // some js array
var bindinglist = new WinJS.Binding.List(data);
lv.itemDataSoutce = bindinglist.dataSource;
lv.itemTemplate = function(itemPromise) {
    return itemPromise.then(function(item) {
        var f = $('<div></div>');
        f.text(item.title);
    });
};

使用方法の例については、これを参照してください。恥知らずなプラグイン、 WinJS コントロールがどのように機能するかについての記事を書きました。背景を読むのに良いかもしれません。

ItemTemplate は HTML テンプレートにすることもできます (WinJS コントロール WinJS.Binding.Template を参照してください)。必要に応じて、Mustache.JS などの他のテンプレート ライブラリを再利用し、itemTemplate 関数を介してそれらをフックすることもできます。これは、WinJS でのKnockout テンプレートの再利用について書いた記事です。

于 2013-02-26T12:40:18.677 に答える
0

この問題を解決するには、コンバーターを使用します。この行の代わりにコード例で：

<p data-win-bind="textContent: files"></p> // i get [Object object], [Object object]

そのようなコンバーターを追加するだけです

<p data-win-bind="innerHTML: files myFilesToStringConverter"></p>

そして、コンバーターを .js ファイルで定義します。

var myFilesToStringConverter = WinJS.Binding.converter(function(files){
   var convertedValue = "<ul>";
   for(var i=0;i<files.length;i++){
      convertedValue += "<li><span>" +files[i].id + "</span> <span> " + files[i].title + "</span></li>";
   convertedValue += "<ul>";
   return convertedValue ;
   }
});

このコンバーターを配置すると、期待どおりにリストされたファイルの ID と名前が表示されます。

于 2013-03-01T22:28:18.557 に答える