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

Question

我有静态TabContainer,TabContainer中的所有ContentPanes都应该从servlet中获取的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.

任何示例代码都非常受欢迎.

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 ::替换为字典: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