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

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

1 个答案: