2

Meteorをいじり始めたばかりで、イベントがトリガーされたときにデータベースを更新するための単純なCollection.insertの次のコードを取得できません。テキストフィールドの値が消える前に一瞬だけページが更新されるのを見ることができます（おそらくMeteorが値がサーバーに書き込まれていないことに気付いた後）。コンソールからの挿入は問題なく機能します...私が見落としている基本的な概念はありますか？

file.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});
        }
    };
}

file.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が実行される前にページのリロードを発行し、サーバーへのリクエストをキャンセルします。

「クリック」の代わりに「マウスダウン」を使用するか、（はるかに良い）ボタンがページのリロードを実行しないようにしてください。

このスニペットを使用してみてください。ボタンの送信が無効になり、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>

2番目のタグをbuttonに変更し、<input>そのtype属性を'button'に設定して、ボタンが何もしないようにしました。

于 2013-01-07T13:32:45.800 に答える