dojo函数在标记中不起作用

Question

嗨，我正在研究基于dojo的node.js当我执行ajax时，为字符串创建了一个表。

我在表中有一行插入一个链接。为了调用一个函数。

但是当我点击链接时功能不起作用。

错误消息 - ＆gt;未捕获的ReferenceError：未定义func。

请帮助我..

我的board.html

   require([ "dojo/parser","dojo/dom", "dojo/on", "dojo/request", "dojo/json","dojo/_base/array"
          ,"dijit/Dialog","dijit/form/Button","dijit/form/CheckBox","dijit/layout/BorderContainer",
        "dijit/layout/TabContainer", "dijit/layout/ContentPane",
        "dojo/domReady!" ], function(parser,dom,on,request,json,arrayUtil,Dialog,Button,CheckBox) {
    parser.parse();
    .....
    function func(no){
       alert('seq:'+no);
    }
    var xhrArgs = {
                url: '/getData',
                handleAs: "json",
                load: function(data){
                     var output ='';
                        output+='<table  class="output" cellspacing="0" cellpadding="0" border="1">';
                        output+='<thead>';
                        output+='<tr><th>NO</th><th>NAME</th><th>FORM</th><th>DESCRIPTION</th><th>WRITER</th>';
                        output+='</tr>';
                        output+='</thead>';
                        output+='<tbody>';
                      arrayUtil.forEach(data,function(item,i){
                            output+='<tr>';
                            output+='<td>'+item.seq+'</td>';
                            output+='<td>'+item.name+'</td>';
                            output+='<td><a href="#" onclick="func('+item.seq+');return false;">'+item.form+'</a></td>';
                            output+='<td>'+item.desc+'</td>';
                            output+='<td>'+item.writer+'</td>';
                            output+='</tr>';
                      });//end for
                      output+='</tbody>';
                      output+='</table>';
                      resultDiv.innerHTML = output; 
               },//end load
             ......

Answer 1

这是因为func()函数在require()回调函数中是本地作用域的。这意味着您无法看到它，除非您从require()回调中调用该函数。

但是，onclick属性只能访问全局范围，因此在当前情况下它无法执行func()，这就是为什么它会给出未定义的错误。

要解决此问题，您可以做两件事：

1. 将您的func()移至全局范围
2. 将您的事件处理移至本地require()范围

---

将您的func()移至全局范围

要将您的函数移动到全局范围，您应该将函数重写为：

func = function(no){
   alert('seq:'+no);
}

因为它前面没有var，所以它实际上被应用于全局范围。您还可以编写以下内容：

window.func = function(no){
    alert('seq:'+no);
}

这是最简单的解决方案，也是最丑陋的解决方案。通常建议尽可能少地使用全局范围，在这种情况下，它并不是必需的。

将您的事件处理移至本地require()范围

更好的解决方案（我认为）是将您的事件处理移动到与您的函数相同的本地范围。但是，为了做到这一点，您不能使用您现在使用的相同策略。您必须使用 dojo / dom-construct 模块构建正确的DOM节点来替换output DOM字符串。

例如：

var table = domConstruct.create('table', {
    class: "output",
    cellspacing: 0,
    cellpadding: 0,
    border: 1
});
domConstruct.place('<thead>' +
    '<tr><th>NO</th><th>NAME</th><th>FORM</th><th>DESCRIPTION</th><th>WRITER</th>' +
    '</tr>' +
    '</thead>', table);
var body = domConstruct.create("tbody");
arrayUtil.forEach(data, function(item,i){
    var row = domConstruct.create("tr");
    domConstruct.place('<td>'+item.seq+'</td>', row);
    domConstruct.place('<td>'+item.name+'</td>', row);
    var cell = domConstruct.create('td');
    domConstruct.place(cell, row);
    var link = domConstruct.create("a", {
        href: "#",
        innerHTML: item.form
    });
    on(link, "click", function() {
        func(item.seq);
        return false;
    });
    domConstruct.place(link, cell);
    domConstruct.place('<td>'+item.desc+'</td>', row);
    domConstruct.place('<td>'+item.writer+'</td>', row);
    domConstruct.place(row, body);
});
domConstruct.place(body, table);
domConstruct.place(table, resultDiv);

这段代码取代了整个DOM构造。它创建DOM节点并使用 dojo / on 模块将func函数添加为 onClick 事件的事件处理程序。

我还制作了一个展示此解决方案的JSFiddle。

这有几个好处：

• 您的func()仅在必须可用的地方提供。没有人可以通过在全局范围内使用具有相同名称的变量来覆盖它。
• 您可以看到我在JavaScript部分使用的HTML代码较少，而且HTML部分的JavaScript函数较少（不再需要onclick属性）。如果您进一步改进，可以将HTML代码和JavaScript代码分离，从而改善应用程序的结构。