Javascript 在Dojo中，如何实用地创建共享TabContainer相同结构的ContentPane？

我有静态TabContainer，TabContainer中的所有内容窗格都应该根据从servlet获取的json数据动态创建。所有ContentPane共享相同的模板，只有数据不同。比如：

[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);

var cp1=new dijit.layout.ContentPane({
标题：“新问题”，
内容：“我被及时添加”
“，
});
dijit.byId（“中心布局”）.addChild（cp1）；

那么，我如何通过“模板”或Dojo中的一些概念来实现这一点呢？ 也许有一个我不知道的更强大的组件可以将查询的数据绑定到所有这些重复的ContentPane

---

非常感谢您提供任何示例代码。

使用lang.replace的简单模板

根据ContentPane内容/模板的复杂性，一种简单的方法是使用简单的

lang.replace

。假设您将姓名/年龄/生日模板制作成这样（例如，

cai/personTpl.html

）：

有关dojo/_base/lang:：替换为字典的更多信息，请参见此处：

---

使用自定义小部件的更复杂模板

如果每个选项卡中使用的模板更复杂，例如单独使用小部件、使用事件等，则最好编写自定义小部件（而不是使用ContentPane）

例如，模板可以类似（

cai/widgets/personTpl.html

）：

然后，您可以将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

---

关于小部件（以及属性映射到节点的小部件）的更多信息，请点击此处：

感谢您的回复，我将检查您附加的链接，如果有任何问题，请您进一步提问。

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

<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>

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

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