Question

我创建了一个新的dijit，它在模板中包含一些标准的dijit。似乎模板中的dijits没有启动。做这个的最好方式是什么？此外，如果我犯了任何其他错误，请接我，就像我上次与Dojo大约3年前合作一样....

更新我正在使用Dojo 1.8并依赖于自动需要的模块。我只有有限的能力来改变我正在使用的环境，因为这是一个更大项目的一个子集。

更新2 问题已在下方得到解答，但欢迎您就我发现的模板问题发表评论...： - ）

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;
});

模板：

<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>

Answer 1

要让Dijits进入您的模板，您需要添加dijit/_WidgetsInTemplateMixin

dijit代码现在看起来像这样，演示了一个简单的事件处理程序..

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;
});

使用${id]和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>

Answer 2

可以通过HTML中的简单onClick来解决问题吗？

喜欢：

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

除此之外，您可以尝试将Checkbox连接到以下事件：

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

或

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

更新1：

如果您想在开始时加载它，您可以像这样初始化它：

/**************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***************************/

我将这个加载到被调用的Javascript-File的顶部以赶上onkeypress事件。 dojo准备好你dojo和所有功能已经加载

希望这可能有所帮助。

此致，Miriam

Answer 3

我的第一个建议是它一定是

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

并没有定义。

作为参考，这里是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
    });

});

以下是它的链接：http://dojotoolkit.org/documentation/tutorials/1.7/templated/

也许只需将define更改为require即可正确加载小部件。

此致，Miriam

在模板中启动dijits

3 个答案: