简单的流星插入不起作用 [英] Simple meteor insert not working

查看:47
本文介绍了简单的流星插入不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我刚刚开始使用 Meteor,无法获取以下代码,用于在触发事件时更新数据库的简单 Collection.insert.我什至可以看到页面在消失之前用文本字段的值更新了几秒钟(大概是一旦 Meteor 意识到该值没有写入服务器).通过控制台插入工作正常......是否有一些我忽略的基本概念?

I am just getting started messing around with Meteor and can't get the following code for a simple Collection.insert to update the database when the event is triggered. I can even see the page update with the value of the text field for a split-second before disappearing (presumably once Meteor realized the value wasn't written to the server). Inserting via the console works just fine... Is there some basic concept that I am overlooking?

文件.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 以取消对服务器的请求之前,您的提交按钮会发出页面重新加载.

Your submit button issues a page reload before your javascript is executed canceling your request to the server.

尝试使用mousedown"而不是click"或(更好)防止按钮重新加载页面.

Try using 'mousedown' instead of 'click' or (much better) prevent the button from doing a page reload.

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

Try using this snippet, it disables the submit for the button so only your javascript is executed.

<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>-tag 更改为 button 并将其 type 属性设置为 'button' 以使按钮不执行任何操作.

I changed your second <input>-tag to button and set it's type attribute to 'button' to make the button do nothing.

这篇关于简单的流星插入不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆