迁移DOJO 1.5到1.7代码/没有错误，但无法传递事件

Question

我花了两天时间将我的页面从 Dojo 1.5 转换为 1.7.2。我终于没有主意了，因为我没有收到更多错误。但是，该网页无法正常运行。我能够从服务器接收到两个成功的查询，但之后我似乎无法让事件连接回其函数。

我变了

dojo.connect(dijitId, event, null,function);

到

on(dijitId, event, null, function);

但仍然没有骰子。

这是 script.js 中的函数和连接代码

    //When a user selects a node in tree, enable/disable menus
function selectNode(e) {
    var item = dijit.getEnclosingWidget(e.target).item;
    if(item !== undefined) {
        groupsTree.set("selectedItem",item);
            // Changed "if(item.id !=0) {"
        if(item.userNum != 0) {
            mnuRenameGroup.set("disabled",false);
            mnuDeleteGroup.set("disabled",false);
            ctxMnuRenameGroup.set("disabled",false);
            ctxMnuDeleteGroup.set("disabled",false);
        } else {
            mnuRenameGroup.set("disabled",true);
            mnuDeleteGroup.set("disabled",true);
            ctxMnuRenameGroup.set("disabled",true);
            ctxMnuDeleteGroup.set("disabled",true);
        }
    }
}

//When a user selects a row in grid, enable/disable menus
function selectRow(e) {
    if(e.rowIndex != null) {
        this.selection.clear();
        this.selection.setSelected(e.rowIndex, true);

        mnuEditContact.set("disabled", false);
        mnuMoveContact.set("disabled", false);
        mnuDeleteContact.set("disabled", false);
        ctxMnuEditContact.set("disabled", false);
        ctxMnuMoveContact.set("disabled", false);
        ctxMnuDeleteContact.set("disabled", false);
    }
}

//Display contact detail in main preview pane           
function displayContact(idx) {
    var item = this.getItem(idx);
    var contactId = item.userNum;
    contactView.set("href", "data/contact.php?contact_id="+contactId);

    mnuEditContact.set("disabled", false);
    mnuMoveContact.set("disabled", false);
    mnuDeleteContact.set("disabled", false);
    ctxMnuEditContact.set("disabled", false);
    ctxMnuMoveContact.set("disabled", false);
    ctxMnuDeleteContact.set("disabled", false);
}

//Reload contacts data grid when a user clicks on a node in the groups tree
on(groupsTree, "onClick", null, updateDataGrid);

//Select tree node on right click
on(groupsTree, "onMouseDown", null, selectNode);

//Select data grid row on right click
on(contactsGrid, "onRowContextMenu", null, selectRow);

//Display contact detail on data grid selection
on(contactsGrid, "onSelected", null, displayContact);

//Menus
on(mnuNewContact, "onClick", null, newContact);

on(mnuNewGroup, "onClick", null, function(e) {
    newGroupDialog.show();
});

on(mnuRenameGroup, "onClick", null, renameGroup);
on(ctxMnuRenameGroup, "onClick", null, renameGroup);
on(mnuDeleteGroup, "onClick", null, deleteGroup);
on(ctxMnuDeleteGroup, "onClick", null, deleteGroup);

on(mnuEditContact, "onClick", null, editContact);
on(ctxMnuEditContact, "onClick", null, editContact);
on(mnuMoveContact, "onClick", null, moveContact);
on(ctxMnuMoveContact, "onClick", null, moveContact);
on(mnuDeleteContact, "onClick", null, deleteContact);
on(ctxMnuDeleteContact, "onClick", null, deleteContact);

//Dialog boxes
on(newGroupDialog, "onShow",null, function(e) {
    registry.byId("new_group_name").reset();
});
on(newGroupForm, "onSubmit", null, doNewGroup);
on(newGroupCancel, "onClick", null, function(e) {
    newGroupDialog.hide();
});     

on(editGroupDialog, "onShow", null, function(e) {
    registry.byId("edit_group_name").reset();
});
on(editGroupForm, "onSubmit", null, doEditGroup);
on(editGroupCancel, "onClick", null, function(e) {
    editGroupDialog.hide();

}); 

on(moveContactDialog, "onShow", null, refreshGroupDropDown);
on(moveContactForm, "onSubmit", null, doMoveContact);
on(moveContactCancel, "onClick", null, function(e) {
    moveContactDialog.hide();
});

// Actions for change password
on(editPwForm, "onSubmit", null, doChangePw);
on(changePwdButton, "onclick", null, changePw);
on(passwordCancel, "onClick", null, function(e) {
    pwdDialog.hide();
});


on(editContactForm, "onSubmit", null, doEditContact);
on(editContactCancel, "onClick", null, function(e) {
    editContactDialog.hide();
});

on(okDialogOK, "onClick", null, function(e) {
    registry.byId("okDialog").hide();
}); 

这是构建数据网格、树和内容面板的 html。

<body class="claro">

    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='design:"header", gutters:"false", liveSplitters:"true"' id="borderContainer">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"top"' id="topBar">
            <h1>Admin Panel</h1>

                <!-- Start of Menu bar -->
            <div data-dojo-type="dijit.MenuBar" id="navMenu">
                <div data-dojo-type="dijit.PopupMenuBarItem">
                    <span>File</span>
                    <div data-dojo-type="dijit.Menu" id="fileMenu">
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuNewContact">New User</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuNewGroup">New Team</div>
                    </div>
                </div>
                <div data-dojo-type="dijit.PopupMenuBarItem">
                    <span>Edit</span>
                    <div data-dojo-type="dijit.Menu" id="editMenu">
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuEditContact"  data-dojo-props='disabled:"true"'>Edit User</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuMoveContact"  data-dojo-props='disabled:"true"'>Move User</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuRenameGroup"  data-dojo-props='disabled:"true"'>Rename Team</div>

                        <div data-dojo-type="dijit.MenuSeparator"></div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuDeleteContact"  data-dojo-props='disabled:"true"'>Delete User</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="mnuDeleteGroup"  data-dojo-props='disabled:"true"'>Delete Team</div>
                    </div>
                </div>
            </div>
                <!-- End of Menu bar -->
        </div>

        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='region:"center", gutters:"true", liveSplitters:"true"' id="mainSection">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='splitter:"true", region:"left"' id="treeSection">
                <div data-dojo-type="dojo.data.ItemFileWriteStore" data-dojo-id="groupsStore" data-dojo-props='url:"data/groups.php"'></div>
                    <!-- Changed childrenAttrs from groups to teamTbl. Changed query id to teamNum -->
                <div data-dojo-type="dijit.tree.TreeStoreModel" data-dojo-id="groupsModel" data-dojo-props='store:groupsStore, childrenAttrs:["teamTbl"],query:{teamNum:"0"}'></div>
                <div data-dojo-type="dijit.Tree" id="groupsTree" data-dojo-id="groupsTree" data-dojo-props='model:groupsModel'>

                            <!-- Right Click menu Groups -->
                    <div data-dojo-type="dijit.Menu" targetNodeIds="groupsTree">
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="ctxMnuRenameGroup" data-dojo-props='disabled:"true"'>Rename Team</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="ctxMnuDeleteGroup" data-dojo-props='disabled:"true"'>Delete Team</div>
                    </div>
                </div>
            </div>
            <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='design:"header", gutters:"true", liveSplitters:"true", region:"center"' id="mainContainer">
                <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"top", splitter:"true"' id="gridSection">
                    <span data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-id="contactsStore" data-dojo-props='url:"data/contacts.php"'></span>
                    <table data-dojo-type="dojox.grid.DataGrid" id="contactsGrid" data-dojo-id="contactsGrid"    
                        data-dojo-props='columnReordering:"true", 
                        store:contactsStore, 
                        clientSort:"true", 
                        selectionMode:"single", 
                        query:{userFirst: "*"}, 
                        sortFields:["userLast","userFirst"], 
                        rowHeight:"25"'>

                                <!-- Headers for the contacts -->
                        <thead>
                            <tr>
                                <th field="userLast" width="200px">Last Name</th>
                                <th field="userFirst" width="200px">First Name</th>
                                <th field="userName" width="100%">Username</th>
                            </tr>
                        </thead>

                        <script type="dojo/method" event="onRowContextMenu" args="e">

                        </script>
                    </table>
                                    <!-- Right Click menu Contacts -->
                    <div data-dojo-type="dijit.Menu" id="gridMenu" targetNodeIds:"contactsGrid">
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="ctxMnuEditContact" data-dojo-props='disabled:"true"'>Edit User</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="ctxMnuMoveContact" data-dojo-props='disabled:"true"'>Move User</div>
                        <div data-dojo-type="dijit.MenuItem" data-dojo-id="ctxMnuDeleteContact" data-dojo-props='disabled:"true"'>Delete User</div>
                    </div>
                </div>
                <div data-dojo-type="dijit.layout.ContentPane" id="contactView" data-dojo-id="contactView" data-dojo-props='region:"center"'>
                    <em>Select a user to view above.</em>
                </div>
            </div>
        </div>
    </div>

任何建议都会很棒。仅供参考：我是初学者。如果代码看起来很熟悉，那是因为它来自 IBM 的教程之一。

更新：这是完整的代码http://jsfiddle.net/5G6U4/#

Answer 1

我回去阅读了 1.7 的发行说明。是的，它确实声明了 dojo.connect:

...已被重构以使用新的 dojo/on 模块进行事件处理。请参阅下面的 dojo/on 了解更多信息。

我读了“dojo/on”部分，了解它比 dojo.connect 好多少，但最后没有看到这一小部分。 http://dojotoolkit.org/reference-guide/1.7/releasenotes/1.7.html#dojo-on

该 API 计划替换 Dojo 2.0 中现有的 dojo.connect API。传递给非 DOM 事件的事件处理程序的参数以及用于非 DOM 事件的事件名称预计会在 Dojo 2.0 中发生更改，因此连接到非 DOM 事件的 Dojo 1.x 应用程序不必将现有代码迁移到 dojo /on 如果这样做是为了面向未来。

我将代码从 dojo/on 更改回 dojo.connect，一切正常！当 2.0 发布时，这可能会出现问题，但代码现在是最新的。谢谢斯蒂芬！