注意，上面的 neme 對象是用于顯示 name 屬性的。expand 對象用于展開或者關(guān)閉子級對象 entries。子級對象 entries 被設(shè)置為需要延遲實(shí)例化，只有當(dāng)用戶點(diǎn)擊 expand 對象展開子級時，該對象才會實(shí)例化。

數(shù)據(jù)的加載與渲染

如上一節(jié)所述，我們設(shè)定了子級對象 entries 需要延遲實(shí)例化。所以，在給子項(xiàng) Item 提供的數(shù)據(jù)設(shè)置接口不應(yīng)該立馬對 entries 實(shí)例化。下面我們先給出數(shù)據(jù)接口函數(shù)。

Item: {
 // css, xml, map 項(xiàng)同上
 fun: function (sys, items, opts) {
  var data;
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

該接口函數(shù) val 只是設(shè)置了當(dāng)前節(jié)點(diǎn)相關(guān)的內(nèi)容。下面我們來偵聽 expand 對象的點(diǎn)擊事件，并適時地完成組件對象 entries 的實(shí)例化。

Item: {
 // css, xml, map 項(xiàng)同上
 fun: function (sys, items, opts) {
  var data, open;
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 0 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

上述代碼中包含一個 open 參數(shù)，該參數(shù)記錄了當(dāng)前節(jié)點(diǎn)的是否處于展開狀態(tài)以供相關(guān)的偵聽器使用。

動態(tài)添加節(jié)點(diǎn)

現(xiàn)在我們對上述組件進(jìn)行一個小的擴(kuò)展，使得它支持動態(tài)添加樹節(jié)點(diǎn)的功能。首先，我們在對象 entries 的子級添加一個觸發(fā)按鈕，并命名為 add。

Item: {
 xml: "