2

私は静的な TabContainer を持っており、TabContainer 内のすべての ContentPanes は、サーブレットから取得した json データから動的に作成する必要があります。すべての ContentPanes は、データのみが異なる同じテンプレートを共有します。お気に入り：

[Tab A] Tab B Tab C
Name: Jerry
Age: 28
Birthday: 2.9

タブ B をクリックすると:

Tab A [Tab B] Tab C
Name: Michael
Age: 45
Birthday: 2.10

ContentPane のコンテンツは、このサンプルよりもはるかに複雑であり、html で宣言的に記述されているため、次のようにプロマティックに作成することはできません。

var cp1 = new dijit.layout.ContentPane({
    title:"New Question",
    content:"<p>I am added promatically</p>",
});

dijit.byId("centerLayout").addChild(cp1);

では、これを「テンプレート」または Dojo の何かの概念でどのように実装できますか? たぶん、クエリされたデータをこれらすべての繰り返される ContentPane にバインドできるとは思わない、より強力なコンポーネントがあるかもしれません。

サンプルコードは高く評価されています。

4

1 に答える 1

5

lang.replaceを使用した単純なテンプレート

ContentPaneのコンテンツ/テンプレートの複雑さに応じて、それを行う簡単な方法の1つは、単純なを使用することlang.replaceです。名前/年齢/誕生日のテンプレートを次のように作成するとします（例cai/personTpl.html）：

<dl>
    <dt>Name</dt><dd>{name.firstname} {name.lastname}</dd>
    <dt>Age</dt><dd>{age}</dd>
    <dt>Birthday</dt><dd>{birthday}</dd>
</dl>

Javascriptで、次のことができます。

require([..other deps.., 'dojo/_base/lang', 'dojo/text!cai/personTpl.html'],
    function(..other deps.., lang, personTpl) {
        //.. your other code .. 
        // assuming person[i] is something like:
        //   {name: {firstname: 'A', lastname: 'B'}, age: 42..}
        var cp1 = new dijit.layout.ContentPane({
            title:"New Question",
            content: lang.replace(personTpl, person[i]),
         });
         dijit.byId("centerLayout").addChild(cp1);
    }
);//~require

dojo / _base / lang :: replaceの詳細については、こちらをご覧ください：http: //dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-replace

カスタムウィジェットを使用したより複雑なテンプレート

各タブで使用されるテンプレートがより複雑な場合（たとえば、ウィジェットを単独で使用する場合、イベントを使用する場合など）、（ContentPaneを使用する代わりに）カスタムウィジェットを作成する方がよい場合があります。

たとえば、テンプレートは次のようになります（cai/widgets/personTpl.html）：

<dl>
    <dt>Name</dt><dd data-dojo-attach-point='nameNode'></dd>
    <dt>Age</dt><dd data-dojo-attach-point='ageNode'></dd>
    <dt>Birthday</dt><dd>
        <input type='text' data-dojo-type='dijit/form/DateTextBox'
            data-dojo-attach-point='bdayInput' />
     </dd>
</dl>

そして、ウィジェットは（cai/widgets/Person.js）にすることができます：

define([ ..other deps.., "dojo/text!cai/widgets/personTpl.html"],
    function(..other deps.., personTpl) {
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
            templateString: personTpl,

            name: "unknown",
            _setNameAttr: { node: "nameNode", type: "innerHTML" },

            age: 0,
           _setAgeAttr: { node: "ageNode", type: "innerHTML" },

           birthday: new Date(),
           _setBirthdayAttr: function(bday) { 
               this.bdayInput.set("value", bday); 
               this._set("birthday", bday); 
           }
        }); //~declare
    }
); //~define

次に、PersonウィジェットのインスタンスをTabContainerに追加できます。

require([..other deps.., "cai/widgets/Person"],
    function(..other deps.., Person) {
        //.. your other code .. 
        // assuming person[i] is something like:
        //   {name: "Jerry", age: 42, birthday: new Date(), title: "JerryTab"}
        var p = new Person(person[i]);
        dijit.byId("centerLayout").addChild(p);
    }
);//~require

ウィジェット（およびノー​​ドにマップされた属性を持つウィジェット）の詳細については、http：//dojotoolkit.org/reference-guide/1.8/quickstart/writingWidgets.html#mapping-widget-attributes-to-domnode-attributesを参照してください。

于 2013-02-19T12:00:34.490 に答える