在Dojo中，如何創建與TabContainer共享相同結構的實用ContentPane？

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中的含量高於此示例要複雜得多，它的declaretively用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 

更多道場/ _base /郎::與此字典替換：使用自定義窗口小部件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 

然後，您可以添加的聯繫人小部件的實例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 

更多關於widg ets（以及具有映射到節點的屬性的小部件）：http://dojotoolkit.org/reference-guide/1.8/quickstart/writingWidgets.html#mapping-widget-attributes-to-domnode-attributes