助手可以检测由 createElement() 创建的新元素吗？答案

【问题标题】：Can helpers detect new elements created by createElement()?助手可以检测由 createElement() 创建的新元素吗？
【发布时间】：2015-05-26 22:15:19
【问题描述】：

我有一个带表格的页面。每个表格行，有两个链接“删除”和“编辑”。 “删除”工作正常。

我想做这个场景：

当用户点击行“编辑”链接时，会出现一个包含该行字段的小窗口。用户决定是否编辑。用户可以按“保存更改”或“取消”。我用 JavaScript document.createElement() 做了小窗口的选项，窗口出现成功。但我想为“保存更改”和“取消”按钮添加助手。我不能使用助手来做到这一点

Template.codesList.events({
    'submit form#newForm': function (events) {
        // some actions
        };
    },

    'click #edit': function () {
        var px     = 'px';

        // Create an Overlay
        var myOverlay = createOverlay();
        document.body.appendChild(myOverlay);

        // Create edit window display it over the Overlay
        var editWindow = createPopup(300, 400);

        // Create elements and append it to edit window
        var editForm = editWindowForm(this._id, this.name);

        editWindow.appendChild(editForm);
        document.body.appendChild(editWindow);
    },

    'click #delete': function () {
        if (confirm("Are you sure?")) {
            Codes.remove({_id: this._id})
        }
    },

    'submit form#editForm': function (event) {
        event.preventDefault();
        console.log("Clicked");  // This doesn't displayed
    }
});

这是显示后的表格。

<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
<div class="form-group">
    <label for="itemCode" class="control-label">Code</label>
    <input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
</div>

<div class="form-group">
    <label for="itemName" class="control-label">Name</label>
    <input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
</div>

<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="button" value="Cancel" class="btn btn-info">
</form>

但是当我按下“保存更改”按钮时，console.log() 没有打印，并且表单正在正常提交并且页面再次重新加载。那么，我错过了什么？

顺便说一句，这是控制台的输出：

document.querySelector('form#editForm')
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">…</form>

【问题讨论】：

标签： meteor helpers createelement

【解决方案1】：

将编辑表单定义为模板。像往常一样使用事件处理程序来处理保存和取消按钮单击。

要渲染它，只需将其放在页面模板中并使用 '#if sessionEditPopup' 或如果您必须自己执行，则使用 UI.renderWithData docs here

顺便说一句，使用 jquery 等手动修改 DOM 是要避免的，除非没有其他方法并且不是 Meteor 的做事方式。

【讨论】：

如何让编辑表单看到用户点击的行数据？
this 在您的事件处理程序中将为您提供该行的数据上下文。您可以将其作为UI.renderWithData 的最后一个参数或将其设置为Session.set('editRowData', this) 以检索它
mmmm，谢谢，我明白了。我在计算中采用了会话功能。你说得对，这不是 Meteor 的做事方式。感谢您的文档。

【解决方案2】：

添加点击事件将数据保存到 Session 中，因为 Session 可以全局访问。并使用会话从 Template.name.Healper 获取数据，因此，当您更改会话值时，会自动更改您的页面内容。这是链接可能对U有用 http://meteortips.com/first-meteor-tutorial/sessions/

【讨论】：

谢谢@Pankaj，我明白了。