0

そのため、JSONリクエストからのデータをテンプレートを介して表示しようとしています。データには、次のような（さまざまな量の）ネストされたオブジェクトがいくつかあります。

data: "Some data",
nested: [
 {
  nested_data: "foo",
  bar: "foobar"
  }, ...
],
...

JSONをうまく解析してWinJS.Binding.Listオブジェクトに保存し、結果をテンプレートにバインドすることができました。私が抱えている問題は、実際にネストされたJSONデータをテンプレートに表示することです。テンプレートは次のようになります。

<div class="appTemplate">
 <div class="innerTemplate">
  <h1 data-win-bind="innerText: data">
  <h2 data-win-bind="innerText: nested">
 </div>
</div>

[object Object]これらのプログラムを実行すると、テンプレートの「ネストされた」部分は、表示したいデータではなく、単なる束になります。

ネストされたデータを処理できるようにテンプレートを作成する方法はありますか？テンプレート関数を定義する方が簡単でしょうか？ここで何をすべきかわからない...

4

3 に答える 3

4

これを行うための組み込みの方法はありません。データを反復処理するための組み込みのコントロールはリストビューだけです。ただし、リストビューをネストすることはできません。

希望する結果に応じて、この問題を解決する2つの方法があります。

1）ネストされたデータの文字列化：これを行うWinJS.Binding.converterには、データの配列を単一の文字列値に変換するを記述します。例

コード：

WinJS.Namespace.define("Examples.Converters", {
    nestedDataConverter: WinJS.Binding.converter(function(input) {
        // Assume input is array
        var result = "";
        input.forEach(function(data) {
            result += data.nested_data + ", " + bar + ";";
        });

        result result;
    }),
});

レンプレート：

私が推奨する解決策は、配列（または）を取得して必要な要素/レイアウトを作成する独自のコントロールを構築することです。WinJS.Binding.List私は自分が取り組んでいるプロジェクトでこれを行いましたが、それは非常に簡単です。

テンプレートの例：

<div class="appTemplate" data-win-control="WinJS.Binding.Template">
  <div class="innerTemplate">
    <h1 data-win-bind="innerText: data">
    <h2 data-win-bind="innerText: nested Examples.Converters.nestedDataConverter">
  </div>
</div>

これで、h2にはそのデータの単一文字列バージョンが含まれます。

2）データを豊富に表示するためのコントロールを作成します。これを行うには、新しいWinJSコントロールを作成し、それをテンプレートで使用する必要があります。

制御例：

WinJS.Namespace.define("Examples.Controls", {
    Stamper: WinJS.Class.define(function(element, options) {
        WinJS.UI.setOptions(this, options);
        this.domElement = element;
    }, {
        domElement: nullm
        _data: null,
        data: {
            set: function(val) {
                this._data = val;
                updateLayout();
            }
        },
        updateLayout: function() {
            this.domElement.innerHTML = "";
            if(!this._data) {
                return;
            }

            this._data.forEach(function(item) {
                var el = document.createElement("div");
                el.textContent = "Data: " + item.nested_data + ", " + item.bar;
                this.domElement.appendChild(el);
            }.bind(this));
        }
    }),
});

レンプレート：

<div class="appTemplate" data-win-control="WinJS.Binding.Template">
  <div class="innerTemplate">
    <h1 data-win-bind="innerText: data"></h1>
    <div data-win-control="Examples.Controls.Stamper"
         data-win-bind="winControl.data: nested"></div>
  </div>
</div>

このコントロールを拡張して、ネストされたテンプレートやその他のアイテムをレンダリングできます。それはあなたがどれだけ複雑になりたいかという問題です。

于 2012-11-12T02:53:23.540 に答える
0

これは、テンプレート関数を使用するとはるかに簡単になります。

組み込みのバインド可能なテンプレートは、ロジックレスのテンプレートには最適ですが、データ値、場合によってはより深いプロパティに基づいて決定を行うためにテンプレートが必要な場合は不十分です。

于 2012-11-21T20:11:08.987 に答える
0

試すdata-win-bind="innerText: nested.nested_data"

于 2012-11-12T02:24:16.967 に答える