0

AwesomiumでGUIコントロールとして使用することを目的としたページを作成しています。このページでは、実行時にアプリケーションによってコンテンツが制御されるリストが必要です。

Awesomiumを使用すると、Webページをバッファーにレンダリングし、たとえば3Dアプリのオブジェクトのテクスチャとして描画できるため、サーバー側のコードを実行する「サーバー」や、「GUI」と「GUI」の間の通信はありません。アプリケーションは、ほぼ完全にJavascript関数呼び出しとコールバックを介して行われます。

リストはいくつかの<div>sで構成され、それぞれが比較的複雑なので、入力してリストに追加できるエントリのテンプレートを作成したいと思います。

これまでのところ、私は次のようなことをしています。

    function refresh() {
        contentpane.innerHTML = '';
        var i = 0;
        for (i = 0; i < page.contentlist.length; i++) {
            contentpane.innerHTML += '<div id=\'' + page.contentlist[i] + '\'class="button" onclick=page.callback("clicked",id) > <img src="\screenshot.jpg"/> <label ></label> </div>';
        }
    }

しかし、リストのエントリが複雑になるほど扱いにくくなるので、もっと良い方法があるはずだと思います。

Javascript関数内でテンプレート化されたアイテムのリストを作成するための最も簡単な方法は何ですか？

私が使用できるWPFのDataTemplateシステムに似たものはありますか？

4

2 に答える 2

1

Underscore.jsには、ご覧いただけるテンプレートエンジンがあります。テンプレートを別々のファイルに入れて、必要に応じてajax経由でロードすることもできます。

次のテンプレートがあるとします。

<script type="text/template" id="tmpl-listentry">
  <div id='<%= content %>' class="button" onclick='page.callback("clicked",id)'>
    <img src="/screenshot.jpg" />
    <label></label>
  </div>
</script>

ロードしてドキュメントに添付した後、次のように使用できます。

function refresh() {
    var i = 0,
        tmplElem = document.getElementById('tmpl-listentry'),
        compiled = _.template(tmplElem.innerHTML);

    contentpane.innerHTML = '';
    for (i = 0; i < page.contentlist.length; i++) {
        contentpane.innerHTML += compiled({content: page.contentlist[i]});
    }
}

注：もちろん、更新のたびにコンパイルするのではなく、コンパイルしたテンプレートをキャッシュする必要があります。

于 2012-02-09T22:56:28.013 に答える
1

このテンプレートツールのようなものを提案します...

アプリケーションはJSONデータを生成する必要があります。このデータは、前述のツールを使用して取得および表示できます。そうすれば、プレゼンテーションとロジックを明確に分離できます。

リストを生成する例は次のようになります。

HTML

<table class="playerList">
  <thead>
    <tr>
      <th>Player</th>
    </tr>
  </thead>
  <tbody>
    <tr class="player">
      <td>Chloe</td>
    </tr>
  </tbody>
</table>

指令

{
  "tbody tr": {
    "player<-players": {
      "td": "player",
      "td@style": "\"cursor:pointer\"",
      "td@onclick": "\"clickLine(this);\""
    }
  }
}

データ

{
  "players": [
    "Adrian Meador",
    "Bryan OConnor",
    "Todd Swift",
    "Valerie Paige",
    "Walter Hagelstein",
    "Wendy Leatherbury"
  ]
}

結果

Player
Adrian Meador
Bryan OConnor
Todd Swift
Valerie Paige
Walter Hagelstein
Wendy Leatherbury
于 2012-02-10T08:40:37.910 に答える