1

何らかの理由で、テンプレートがデータのバインドに使用されていません。Windows 8 アプリ用の Visual Studio の「ナビゲーション アプリ」プロジェクト タイプを使用しています。実行すると、各項目に完全な json 文字列が入力されます。テンプレートをまったく使用しないバインディングに似ています。

home.js :

var dataList = new WinJS.Binding.List();
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("VideosData", publicMembers);

(function () {
  "use strict";

  WinJS.UI.Pages.define("/pages/home/home.html", {
    ready: function (element, options) {
      dataList.push({title: 'title 1'});
      dataList.push({title: 'title 1'});            
    }
  });
})();

home.html :

<section aria-label="Main content" role="main">
  <div id="videosWin8Tmpl" data-win-control="WinJS.Binding.Template" style="display:none">
    <div><span class="detail" data-win-bind="innerText: title"></span></div>
  </div>
  <div id="videosListView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: VideosData.itemList.dataSource, itemTemplate: videosWin8Tmpl, layout: { type: WinJS.UI.GridLayout } }"></div>
</section>

出力されているもの：

{"title":"title 1"}
{"title":"title 2"}

テンプレートがバインディングで使用されないのはなぜですか? ありがとう。

4

2 に答える 2

3

あなたが見ている行動の理由は微妙です。以下で説明しますが、簡単な答えは次のとおりです。

ページコントロールでIDで検索しないでください。代わりに、クラスとselect構文を使用してください。

以下は、ページコントロールで機能します。

<section aria-label="Main content" role="main">
  <div class="videosWin8Tmpl" 
    data-win-control="WinJS.Binding.Template" style="display:none">
    <div><span class="detail" data-win-bind="innerText: title"></span></div>
  </div>
  <div id="videosListView" data-win-control="WinJS.UI.ListView" 
     data-win-options="{ itemDataSource: VideosData.itemList.dataSource,
                         itemTemplate: select('.videosWin8Tmpl'), 
                         layout: { type: WinJS.UI.GridLayout } }">
  </div>
</section>

どうしたの？

オプションレコードで行う場合itemTemplate: videosWin8Tmpl、処理時にWinJSはvideosWin8Tmplという名前のグローバル変数を検索し、それがテンプレートオブジェクトとしてコントロールに渡されます。これは通常、ブラウザがIDを持つ各要素のグローバル変数を自動的に作成するために機能します。

ただし、ページコントロールを読み込むときに、WinJS.UI.processAllが呼び出された時点では、ページのDOMはまだグローバルドキュメントに追加されていません。そのため、ブラウザはまだグローバル変数を作成していないため、テンプレートが見つかりません。

select（...）式はグローバル変数に依存せず、代わりにオプションレコードが指定されている要素から上向きに検索するため、テンプレートを正しく見つけることができます。

于 2012-11-21T01:33:28.363 に答える
0

わかりました - テンプレート スニペットをすぐ上の default.html に移動する<div id="contenthost">...</div>と、バインディングがそれを見つけることができました。なぜそれが ではなく にある必要があるのか​​ わかりませdefault.htmlんhome.html。

于 2012-11-20T18:42:20.380 に答える