CODEWITHSUNDEEP
javascripttemplatesdojo
user3030405
user3030405

Reputation: 11

Mixin more than one template in a dojo widget

I wanted to mixin templates in a dojo widget same as the way it is mentioned in here, but was not able to mix in more than one template. To achieve this I have tried mixing in dom constructed out of templated string(template to be mixed in) using lang.mixin, however that is not helpful as it does not mix in the attach points and attach events. Please suggest if there is any other way to mix in two templates in a single widget.

Actual scenario: I have to mixin templates for a list container and list item in a widget.

Upvotes: 0

Views: 1491

Answers (2)

Gader
Gader

Reputation: 43

You could also use Dojo/HTML to write a bit of Html. It is similar to DomConstruct and easier for a long Html as you can directly write your elements properties into a simple variable. 

require(["dojo/html", "dojo/dom", "dojo/on", "dijit/form/NumberTextBox","dojo/domReady!"], 
function(html, dom, on){
    on(dom.byId("setContent"), "click", function(){
        html.set(dom.byId("content"), '<div class="myClass">'
            + '<ul id="myId">'
                + '<li> li 1 </li>'
                + '<li> li 2 </li>'
                + '<li> li 3 </li>'
            + '</ul>'
            + '<input type="inputText" />'
        + '</div>',
      {
        parseContent: true
      });
  });
});

http://dojotoolkit.org/reference-guide/1.10/dojo/html.html

Upvotes: 1

user24950814234
user24950814234

Reputation: 2037

In Dojo, it's 1:1 template per widget using the _TemplatedMixin. A single widget cannot have multiple templates.

What is sounds like you're trying to do is have a list item widget inside of a list container widget. You want two widgets, not one!

MyListWidget.html:

<ul></ul>

MyListItemWidget.html:

<li>${itemContent}</li>

Dojo 1.7+: 

define("MyListItemWidget", [
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyListItemWidget.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {
  return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    postCreate: function() {
      // Do your thing.
    }
  });
});

define("MyListWidget", [
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyListWidget.html",
"MyListItemWidget"
], function(declare, _WidgetBase, _TemplatedMixin, template, MyListItemWidget) {
  return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    postCreate: function() {
      new ListItemWidget({itemContent:"Hello"}).placeAt(this.domNode);
      new ListItemWidget({itemContent:"World"}).placeAt(this.domNode);
    }
  });
});

require(["MyListWidget", "dojo/domReady!"], function(MyListWidget) {
  new MyListWidget().placeAt('wherever');
});

Upvotes: 0

Related Questions