Question

我有一个带桌子的页面。每个表格行都有两个链接＆＃34;删除＆＃34;和＆＃34;编辑＆＃34;。＆＃34;删除＆＃34;工作正常。

我想这样做：

当用户点击行＆＃34;编辑＆＃34;链接，出现一个带有该行字段的小窗口。用户决定是否编辑。用户可以按＆＃34;保存更改＆＃34;或＆＃34;取消＆＃34;。我使用JavaScript document.createElement（）做了小窗口选项，窗口显示成功。但我想为＆＃34; Save Changes＆＃34;和＆＃34;取消＆＃34;添加助手。纽扣。我无法使用帮助

来做到这一点

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>

但是当我按下＆＃34; Save Changes＆＃34;按钮，没有来自console.log（）的打印，表单正在进行正常提交，页面重新加载。那么，我错过了什么？

顺便说一下控制台的输出：

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

Answer 1

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

要渲染它，或者只是将它放在带有'#if sessionEditPopup'的页面模板中，或者如果你必须自己做，那么使用UI.renderWithData docs here

BTW使用jquery等手动修改DOM是值得避免的，除非没有其他方法且不是Meteor的做法。

Answer 2

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

帮助者可以检测由createElement（）创建的新元素吗？

2 个答案: