Как добавить виджет в другой виджет в DOJO?

Когда пользователь нажимает кнопку, мне нужно добавить WidgetB в WidgetA (я полагаю, используя WidgetA containerNode).Как добавить виджет в другой виджет в DOJO?

Я попытался в слушателе событий кнопки следующее, но без успеха:

var item = registry.byId('wA'); 
    item.containerNode.innerHTML = '<span id="wB" data-dojo-type="WidgetB"></span>' 
    parser.instantiate(['wB']);

Я бы нужен рабочий пример, спасибо.

http://jsbin.com/johixagebo/1/

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script> 
    <script> 
     require([ 
      "dojo/_base/declare", "dojo/parser", "dojo/ready", 
      "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/_base/lang", "dijit/registry" 
     ], function (declare, parser, ready, _WidgetBase, _TemplatedMixin, lang, registry) { 
      var propA = { 
       templateString: "<div>" + 
        "<div>WidgetA: <span data-dojo-attach-point='customNode'></span></div>" + 
        '<div data-dojo-attach-point="containerNode"></div>' + 
        "</div>", 
       custom: "CUSTOM DEFAULT", 
       _setCustomAttr: function (value) { 
        this.custom = value; 
        this.customNode.innerHTML = value; 
       } 
      }; 
      var propB = { 
       templateString: "<div>" + 
        "<div>WidgetB: <span data-dojo-attach-point='customNode'></span></div>" + 
        "</div>", 
       custom: "CUSTOM DEFAULT", 
       _setCustomAttr: function (value) { 
        this.custom = value; 
        this.customNode.innerHTML = value; 
       } 
      }; 
      declare("WidgetA", [_WidgetBase, _TemplatedMixin], propA); 
      //declare("WidgetB", [_WidgetBase, _TemplatedMixin], propA); 


      ready(function() { 
       parser.parse(); 
       registry.byId("wA").set("custom", 'XYZ'); 
       document.getElementById('btn').addEventListener('click', function() { 
        var item = registry.byId('wA'); 
        item.containerNode.innerHTML = '<span id="wB" data-dojo-type="WidgetB"></span>' 
        parser.instantiate(['wB']); 
       }.bind(this)); 
      }); 
     }); 
    </script> 

</head> 

<body> 
    <span id="wA" data-dojo-type="WidgetA"></span> 
    <input type="button" id="btn" value="add child B to A"> 
</body> 

</html>

источник

2015-03-17 GibboK

Я был в состоянии найти решение, используя следующий код:

с помощью:

parser.instantiate() http://jsbin.com/vetizefehe/1/
parser.parser() http://jsbin.com/rupejizizi/1/

В основном я изменить элемент DOM containerNode с новым HTML, содержащий атрибут dojo-type данных для моего пользовательского виджета (WigetB).

После того, как я разрешаю DOJO синтаксический анализ выборочно на основе нового добавленного виджета с использованием parse.initiate() или parser.parser().

Мне все еще очень интересно узнать, есть ли лучший способ достичь такого же результата, поскольку я не уверен, что выборный синтаксический анализ является наилучшим вариантом.

Примечания:

parser.parser() Прекрасно работает также, если HTML содержит несколько вложенных уровня виджетов. parser.initiate() Работает только для гнездования 1 уровня.

<!DOCTYPE html> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script> 
    <style> 
     #wA { 
      top: 0; 
      background-color: lightblue; 
     } 

     #wB { 
      top: 100px; 
      background-color: lightcoral; 
     } 
    </style> 
    <script> 
     require([ 
      "dojo/_base/declare", "dojo/parser", "dojo/ready", 
      "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/_base/lang", "dijit/registry" 
     ], function (declare, parser, ready, _WidgetBase, _TemplatedMixin, lang, registry) { 
      var propA = { 
       templateString: "<div>" + 
        "<div><span data-dojo-attach-point='customNode'></span></div>" + 
        '<div data-dojo-attach-point="containerNode"></div>' + 
        "</div>", 
       custom: "CUSTOM DEFAULT", 
       _setCustomAttr: function (value) { 
        this.custom = value; 
        this.customNode.innerHTML = value; 
       } 
      }; 
      var propB = { 
       templateString: "<div>" + 
        "<div><span data-dojo-attach-point='customNode'></span></div>" + 
        "</div>", 
       custom: "CUSTOM DEFAULT", 
       _setCustomAttr: function (value) { 
        this.custom = value; 
        this.customNode.innerHTML = value; 
       } 
      }; 
      declare("WidgetA", [_WidgetBase, _TemplatedMixin], propA); 
      declare("WidgetB", [_WidgetBase, _TemplatedMixin], propA); 


      ready(function() { 
       parser.parse(); 
       registry.byId("wA").set("custom", 'XYZ'); 
       document.getElementById('btn').addEventListener('click', function() { 
        var item = registry.byId('wA'); 
        item.containerNode.innerHTML = '<span id="wB" data-dojo-type="WidgetB"></span>' 
        parser.instantiate([dojo.byId("wB")]); 

        console.log(registry.byId('wA')); 
        console.log(registry.byId('wB')); 

       }.bind(this)); 
      }); 
     }); 
    </script> 

</head> 

<body> 
    <span id="wA" data-dojo-type="WidgetA"></span> 
    <input type="button" id="btn" value="add child B to A"> 
</body> 

</html>

источник

2015-03-17 11:26:35 GibboK

Как добавить виджет в другой виджет в DOJO?

ответ

Смежные вопросы