CODEWITHSUNDEEP
javascripttemplatesdojo
vogomatix
vogomatix

Reputation: 5041

Starting up dijits in templates

I have created a new dijit, which contains some standard dijits in the template. It seems that the dijits in the template are not started. What is the best way to do this? Also, if I have committed any other errors, please pick me up on them, as I last worked with Dojo about 3 years ago....

Update I am using Dojo 1.8 and rely on modules being auto-required. I only have a limited ability to change the environment I am working with as this is a subset of a larger project.

Update 2 Question has been answered below, but you're welcome to comment on any issue you spot with my template... :-)

define([
"dojo/_base/declare",
"dijit/_WidgetBase", "dijit/_TemplatedMixin", 
"dojo/text!my/templates/CheckDate.html"
], function(declare, _WidgetBase, _TemplatedMixin, template){
    var x = declare("my.CheckDate", [_WidgetBase, _TemplatedMixin], {
        templateString: template,
    });
    return x;
});

Template:

<div class="row checkDate">
<div class="col paddingRightDiv third">
    <input type="checkbox" id="${name}_Check" data-dojo-type="dijit/form/CheckBox" />
    <label for="${name}_Check">${label}</label>
</div>
<div class="col paddingRightDiv half whenbox">
    <label for="${name}_Date">When might this be?</label>
    <input type="text" id="${name}_Date" name="${name}_Date" maxlength="6" data-dojo-type="dijit/form/TextBox" />
</div>

Upvotes: 0

Views: 410

Answers (3)

MiBrock
MiBrock

Reputation: 1100

Can the problem be solved with a simple onClick in the HTML?

Like :

<input type="checkbox" id="${name}_Check" data-dojo-type="dijit/form/CheckBox" onClick="javascript:callMyFunction();" />

Otherway you could try to connect the Checkbox to an Event like:

on("${name}_Check","click",function(){....});

or

on("${name}_Check","click",callMyFunction);

Update 1:

If u want to load it at the start u can initialize it like this:

/**************Init-Bereich***************************/
var AnlagenStore;
var queryTaskAnlagenNummern, queryallAnlagenNummern;

dojo.ready(initKielAnlagenNummernSuchen);
function initKielAnlagenNummernSuchen(){

    queryTaskAnlagenNummern = new esri.tasks.QueryTask(restServicesLocation + NameSearchService + "/MapServer/23");

    queryallAnlagenNummern = new esri.tasks.Query();
    queryallAnlagenNummern.returnGeometry = true;
    queryallAnlagenNummern.outFields = ["ANLAGE"];

    require(["dojo/keys","dojo/dom","dojo/on"], function(keys, dom, on){
        on(dojo.byId("selectAnlagenNummer"), "keypress", function(evt){
            var charOrCode = evt.charCode || evt.keyCode;
            if (charOrCode == keys.ENTER) {
                zoomToAnlage();
            }
        });
    });

}
/**************Init-Bereich-ENDE***************************/

I load this one at the top of the called Javascript-File to catch up the onkeypress event. The dojo ready garants you that dojo and all functionalitys are allready loaded

Hope this might help.

Regards, Miriam

Upvotes: 1

vogomatix
vogomatix

Reputation: 5041

To get Dijits going in your template, you need to add dijit/_WidgetsInTemplateMixin

The dijit code now looks like this, demonstrating a simple event handler..

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!my/templates/CheckDate.html"
], function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template){
    var x = declare("my.CheckDate", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    templateString: template,
    showDate: function(e) {
        var attr = e ? "block" : "none";
        var id = this.when.id;
        dojo.style(id, "display", attr);            
    },
    });
return x;
});

The template code has been simplified a little,using the ${id] and connectNode:

<div class="row checkDate">
<div class="col paddingRightDiv third">
    <input type="checkbox" id="${id}_Check" data-dojo-type="dijit/form/CheckBox" 
        data-dojo-attach-point="check" data-dojo-attach-event="onChange: showDate"/>
    <label for="${id}_Check" data-dojo-attach-point='containerNode'></label>
</div>
<div class="col paddingRightDiv half whenbox" id="${id}_When" data-dojo-attach-point="when" >
    <label for="${id}_Date">What Date?</label>
    <input type="text" class="miniTextBox" id="${id}_Date" name="${id}_Date" maxlength="5" 
           data-dojo-type="dijit/form/ValidationTextBox" promptMessage="Example: 10/14" data-dojo-props="pattern:'^[01]\\d\\/\\d\\d'" />
</div>

Upvotes: 4

MiBrock
MiBrock

Reputation: 1100

My first advise is that it must be 

require([....,...],function(...){});

and not define.

As reference here's a part of the doje Template-Example:

require([
 "dojo/_base/declare",
 "dijit/_WidgetBase",
 "dijit/_OnClickDijitMixin",
 "dijit/_TemplatedMixin",
 "dojo/text!./templates/SomeWidget.html"
  ],
   function(declare, _WidgetBase, _OnClickDijitMixin, _TemplatedMixin, template) {

    declare("example.SomeWidget", [_WidgetBase, _OnClickDijitMixin, _TemplatedMixin], {
    templateString: template
    //  your custom code goes here
    });

});

and here's the link for it : http://dojotoolkit.org/documentation/tutorials/1.7/templated/

Maybe it's enough to change define into require to load the widgets correct.

Regards, Miriam

Upvotes: 0

Related Questions