Javascript 在模板中启动dijit

我创建了一个新的dijit，它在模板中包含一些标准dijit。模板中的dijit似乎没有启动。最好的方法是什么？此外，如果我犯了任何其他错误，请告诉我这些错误，因为我上次使用Dojo大约是在3年前

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

更新2以下问题已得到回答，但欢迎您对我的模板发现的任何问题发表评论…：-）

模板：

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

${label}
这可能是什么时候？

我的第一个建议是

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

而不是定义

作为参考，这里是doje模板示例的一部分：

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

});

下面是它的链接：

也许将define改为require就足够了，这样就可以正确加载小部件了

---

你好，米里亚姆我的第一个建议是

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

而不是定义

作为参考，这里是doje模板示例的一部分：

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

});

下面是它的链接：

也许将define改为require就足够了，这样就可以正确加载小部件了

---

尊敬的Miriam

要在模板中使用dijit，您需要添加

dijit/\u 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>

什么日期？

要让dijit在模板中运行，您需要添加

dijit/\u 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>

什么日期？

只需在HTML中单击一下就可以解决这个问题吗

比如：

<input type="checkbox" id="${name}_Check" data-dojo-type="dijit/form/CheckBox" onClick="javascript: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文件的顶部加载这个，以跟踪onkeypress事件

希望这能有所帮助

---

您好，Miriam

这个问题可以通过简单的HTML点击来解决吗

比如：

<input type="checkbox" id="${name}_Check" data-dojo-type="dijit/form/CheckBox" onClick="javascript: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文件的顶部加载这个，以跟踪onkeypress事件

希望这能有所帮助

---

关于，Miriam

不，require产生了一个proto未定义的错误。也许如果你知道为什么会发生…：）。这可能是因为我依赖AMD模块自动加载。我遵循了这个示例，必须首先更改require以定义它。你能告诉我更多关于你得到的错误吗？是路径吗要更正模板，请检查以下内容：“dojo/text！。/my/templates/CheckDate.html”嗯，我被卡在这里了。您使用的是哪个版本的dojo？可能是因为您实际使用的dojo版本（示例是在1.7中编写的）对于“require”来说太旧了。我们正在使用1.8。我刚刚找到了解决方案，您需要一个dijit/WidgetsInTemplateMixin在混合中-它位于您提到的页面底部。感谢您的帮助-我将在下面给出一个详细的答案。谢谢，我经常通过Ope，require生成一个proto not define来简单地回答我自己的问题d错误。如果您知道为什么会发生…：-）。这可能是因为我依赖AMD模块自动加载。我遵循了该示例，必须首先更改定义以使其工作。您能告诉更多有关错误的信息吗？模板的路径正确吗？检查此项：“dojo/text！。/my/templates/CheckDate.html”嗯，我被困在这里了。你使用的是哪个版本的dojo？可能是因为你的实际版本dojo（示例是用1.7编写的）太旧了，不适合“require”"。我们正在使用1.8。我刚刚找到了解决方案，你需要一个dijit/WidgetsInTemplateMixin在混音中-它位于你提到的页面底部。感谢你的帮助-我会在下面给出详细的答案谢谢，我经常通过简单的讨论来解决我自己的问题。如果你不满意，我想再增加一个技巧已经在使用

\u WidgetsInTemplateMixin

。通过设置未记录的

contextRequire

属性，可以启用对模板中子小部件的相对引用。（例如

数据dojo type=“../myotherstuff/CustomWidget”

）您可以在中看到一个代码示例，其中显示了如何传递

require

，以使其具有相对上下文。谢谢。我实际上使用了相对引用，但更改了示例以显示我的实际问题。目前唯一的另一个问题是，我在使用data dojo attach事件拾取onclick事件时遇到了问题从上面示例中的复选框中可以看出。是的，这是由于修复了另一个问题。如果您已经在使用

\u WidgetsInTemplateMixin

，我想再添加一个技巧。通过设置未记录的

contextRequire

属性，您可以启用对模板中子窗口小部件的相对引用。（例如

数据dojo类型=“./myotherstuff/CustomWidget”

）您可以在中看到一个代码示例，其中显示了如何传递

require

，以使其具有相对上下文。谢谢。我实际上使用了相对引用，但更改了示例以显示我的实际问题。目前唯一的另一个问题是，我在使用data dojo attach事件拾取onclick事件时遇到了问题从示例中的复选框