小部件事件行为中的dojo templatedmixin答案

【问题标题】：dojo templatedmixin inside widget event behaviour小部件事件行为中的dojo templatedmixin
【发布时间】：2012-12-31 12:16:21
【问题描述】：

观察：

在我正在制作的自定义小部件的模板中，有一行：

<input type="text"  data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange: search"/>

这在更改时工作正常，我的小部件的搜索功能被调用。但是显示的是普通的输入框，不是dijit的花哨的显示。所以我这样做：

<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange: search"/>

现在，显示很好，但更改时不调用搜索。现在我这样做了：

<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-event="onchange: random_name"/>

整个页面崩溃，调试器告诉我dojo在"scope"中找不到函数random_name。

要给出完整的代码，here 他们是：

编辑：代替 onchange，我尝试了 onChange、ondijitchange 或任何其他事件，例如 'onclick'、'onClick'、'ondijitclick ' 等等，但无论我在浏览器中做什么，搜索都不会被调用。

【问题讨论】：

标签： dojo

【解决方案1】：

看看你的代码和dojo 1.8 input example，我可能会从模板中删除附加事件，并使用dojo/on将它添加到你的小部件js文件的“启动”函数中。

因此，使用您的“MainViewWidget.js”代码和模板标记，我将尝试以下修改：

先修改模板...

<input type="text" data-dojo-type="dijit.form.TextBox" data-dojo-props="placeHolder:'Search...'" data-dojo-attach-point="inputNode"/>

小部件改变了...

define(["dojo/_base/declare","dojo/dom",
        "dijit/_Widget", "dijit/_TemplatedMixin",
        "dojo/text!./templates/MainViewWidget.html",
        "dojo/on",
        "dijit/layout/TabContainer", "dijit/layout/ContentPane","dijit/layout/BorderContainer","dijit/form/TextBox", "dijit/layout/AccordionContainer"],

function(declare, dom, _Widget, _TemplatedMixin, template, on){
    return declare("package.MainViewWidget", [_Widget, _TemplatedMixin], {

    // widgetsInTemplate: true, /*keep this false, otherwise data-dojo-attach-event attribute is a pain in the ass!*/

    templateString: template,

    constructor: function(){
    },

    startup: function(){
        on(this.inputNode, "change", function(){//or just have your search function here instead
             alert('hi');
        });
    }
  });
});

如果您想在“on”处理程序中使用“this”引用小部件，则可能需要使用 dojo 的 lang.hitch 作为事件处理程序。

希望对您有所帮助，我没有任何拼写错误。

【讨论】：

【解决方案2】：

在 dijit 中，事件名称是 onChange。

API： http://dojotoolkit.org/api/1.8/dijit/form/TextBox#onChange

【讨论】：