3

わかりましたので、Dojo 1.8 で次のようなものを構築しようとしています...

<ul class="groups">
  <li class="group">
    <ul class="items">
      <li class="item"></li>
    </ul>
  </li>
</ul>

「アイテム」用の単純な TemplatedWidget を作成しました (これを TypeAItem と呼びましょう。ただし、後で異なるテンプレートが必要になると、異なるタイプの「アイテム」が存在する可能性があります。

グループを表す JSON があります。これは次のようになります...

[{
  name: "groupName",
  items: [{ title: "Item 1", type: "someRandomType", otherStuff: {} }]
}]

私の問題は、このネストされたリストを作成する最善の方法がわからないことです。

もともとは、Mustache のような何らかのループ規則を使用したかっただけでしたが、Dojo のテンプレートはそれをサポートしていないようです。次に、Creating a Custom Widgetチュートリアルを読んだ後、ネストされた for ループを次のように使用したいと思いました...

var groupHTML="<ul class='groups'>"
for (group in groups) {
  groupHTML += "<li class='group'>";
  for (item in groups.items) {
    ??? 
    // I'm assuming something like var item = new TypeAItem(item);
    //  but I the tutorial only uses the .placeAt(domNode) function
    // So I'm not sure how to get this to work.
  }
  groupHTML += "</li>
}
groupHTML += "</ul>

他のタイプの項目タイプのリストが必要な場合は、コードの 1 行を変更するか、これを関数として設定し、項目を表すウィジェットに渡すだけで十分です。

これを機能させる方法がわからないので、グループを独自のウィジェットにセットアップしてから、postCreate メソッドでアイテムを作成する必要があるのではないかと考え始めました。ただし、次に group.items 配列を渡す方法と、後でさまざまな項目タイプを処理できるように柔軟にする方法を理解する必要があります。

誰かが助けてくれれば、とても感謝しています！

4

1 に答える 1

4

プログラムでdomNodeを作成するには、dom-constructのcreateメソッドを使用します。

ウィジェットで、次のものを要求します：domConstructとして「 dojo/dom-construct 」

// create the groups and place it on the page
var groups = domConstruct.create("ul", {'class':'groups'}, this.someAttachPoint, 'last');
 // loop
 var group = domConstruct.create("li", {'class':'group'}, groups, 'last');
  // loop
  var items= domConstruct.create("ul", {'class':'items'}, group , 'last');
   // loop
   var item= domConstruct.create("li", {'class':'item',innerHTML:'item X'}, items, 'last');
   // or instead of innerHTML:  item.textContent = 'Some text'; // (check browser support)

domConstruct.createでは、ノードの作成時にノードを配置する必要はなく、「last」がデフォルトであることに注意してください。後でdojoplaceを使用して配置します。また、ループにdojoの配列機能を使用して、創造性を発揮し、ヘルパー関数でこれらのノードを作成することができます。

これらのグループとアイテムの違いによっては、子ウィジェットを作成するというアイデアを採用することもできます。

もう1つのアプローチは、dojox dtlテンプレートを使用することです。これにより、テンプレート内でループのコードを混在させることができます。これらのテンプレートはdjangoテンプレートのように機能します（そして、それを理解するにはdjangoドキュメントを参照する必要があります）

于 2013-02-12T03:30:23.450 に答える