2

我刚刚开始搞乱 Meteor，无法获得以下代码，用于简单的 Collection.insert 在触发事件时更新数据库。我什至可以看到页面在消失之前瞬间更新了文本字段的值（大概是一旦 Meteor 意识到该值没有写入服务器）。通过控制台插入效果很好......有一些我忽略的基本概念吗？

文件.js

var Tasks = new Meteor.Collection("Tasks");

if (Meteor.isClient) {

    Template.main.task = function() {
        return Tasks.find({});
    };

    Template.main.events = {
        'click #submit' : function(event) {
            var task = document.getElementById("text").value;
                Tasks.insert({title: task});
        }
    };
}

文件.html

<body>
  {{> main}}
</body>

<template name="main">
    <form class="form-inline">
        <input type="text" id="text" class="input-small" />
        <input type="Submit" class="btn" id="submit" value="Submit"/>
    </form>
    {{#each task}}
        <span id="output">{{title}}</span>
    {{/each}}
</template>
4

1 回答 1

4

您的提交按钮在执行您的 javascript 取消您对服务器的请求之前发出页面重新加载。

尝试使用“mousedown”而不是“click”或（更好）阻止按钮重新加载页面。

尝试使用此代码段，它会禁用按钮的提交，因此仅执行您的 javascript。

<body>
  {{> main}}
</body>

<template name="main">
    <form class="form-inline">
        <input type="text" id="text" class="input-small" />
        <button type="button" class="btn" id="submit">Submit</button>
    </form>
    {{#each task}}
        <span id="output">{{title}}</span>
    {{/each}}
</template>

我将您的第二个标签更改<input>为按钮并将其类型属性设置为“按钮”以使按钮不执行任何操作。

于 2013-01-07T13:32:45.800 回答