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

Question

我有静态 TabContainer，并且 TabContainer 内的所有 ContentPanes 都应该从从 servlet 获得的 json 数据动态创建。所有的 ContentPanes 共享相同的模板，只有数据不同。喜欢：

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

当点击 Tab B 时：

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

ContentPane 的内容比这个示例复杂得多，而且它是用 html 声明式编写的，所以我不能像这样以 promatically 方式创建它：

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

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

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

非常感谢任何示例代码。

Answer 1

使用 lang.replace 的简单模板

根据 ContentPane 内容/模板的复杂性，一种简单的方法是使用简单的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 with dictionary 在这里：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