meteor - 简单的 meteor 插入不起作用

标签 meteor

我刚刚开始摆弄 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>

最佳答案

您的提交按钮会在执行 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> -标记到按钮并将其类型属性设置为“按钮”以使按钮不执行任何操作。

关于meteor - 简单的 meteor 插入不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14191644/

相关文章:

javascript - 获取meteor中的数据库版本

javascript - Meteor:如何对 simple-todos 演示进行分页?

ssl - Meteor SSL 保护特定页面

mongodb - 在 Meteor/React 中实现可撤销的 MongoDB 事务

node.js - 如何在 meteor 中将变量从服务器发送到客户端?

javascript - 在客户端 JavaScript 中从 Meteor 集合中获取数据

javascript - 每当我更新当前用户时,所有集合都会被刷新(实际上不是)

javascript - 如何使用一组 ID 仅查找集合中的最新文档

meteor - 如何使 session 变量具有反应性?

node.js - ECS 运行状况检查失败 AWS - 副驾驶