0

入力ボタンがクリックされた後に入力フィールドにデータを送信させる方法を知りたいのですが、現在、入力したときに機能するように設定しています。

js

Messages = new Meteor.Collection('messages');

if (Meteor.is_client){

   ////////// Helpers for in-place editing //////////

  // Returns an event_map key for attaching "ok/cancel" events to
  // a text input (given by selector)
  var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
  };

  // Creates an event handler for interpreting "escape", "return", and "blur"
  // on a text field and calling "ok" or "cancel" callbacks.
  var make_okcancel_handler = function (options) {
    var ok = options.ok || function () {};
    var cancel = options.cancel || function () {};

    return function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);
      } else if (evt.type === "keyup" && evt.which === 13) {
        // blur/return/enter = ok/submit if non-empty
        var value = String(evt.target.value || "");
        if (value)
          ok.call(this, value, evt);
        else
          cancel.call(this, evt);
      }
    };
  };//added as test

    Template.entry.events = {};

    Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
      ok:function(text, event){
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
          var ts = Date.now() / 1000;
          Messages.insert({name: nameEntry.value, message: text, time: ts});
          event.target.value = "";
        }//if statment ends
      }
    });


  Template.messages.messages = function () {
    return Messages.find({}, { sort: {time: -1} });
  };
}

html

<head>
  <title>tutorial</title>
</head>

<body>
 {{> entry}}

 {{> messages}}
</body>

<template name="entry">
    <p>
    <input type="text" id="name" placeholder="your name">
    <input type="text" id="messageBox" placeholder="your message">
    <input type="button" id="submit">
    </p>
</template>

<template name="messages">
    {{#each messages}}
        {{> message}} <!--echo of message template-->
    {{/each}}
</template>

<template name="message">
    <p><strong>{{name}}:</strong>{{message}}</p>
</template>

そのコードで次のエラーが発生します

Your app is crashing. Here's the latest log.


app/tuts.js:58
  Template.messages.messages = function () {
  ^^^^^^^^
SyntaxError: Unexpected identifier
    at /Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:113:21
    at Array.forEach (native)
    at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
    at run (/Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:99:7)
Exited with code: 1
Your application is crashing. Waiting for file change.

以下を実行しましたが、それでもエラーが発生します

 if (Meteor.isServer) {
  Template.entry.events({
    'click #submit': function() {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
}
}

エラー

Your app is crashing. Here's the latest log.


app/tuts.js:57
}
^
SyntaxError: Unexpected token }
    at /Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:113:21
    at Array.forEach (native)
    at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
    at run (/Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:99:7)
Exited with code: 1
Your application is crashing. Waiting for file change.

ここにjsファイル全体があります 

Messages = new Meteor.Collection('messages');

if (Meteor.is_client){

   ////////// Helpers for in-place editing //////////

  // Returns an event_map key for attaching "ok/cancel" events to
  // a text input (given by selector)
  var okcancel_events = function (selector) {
    return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
  };

  // Creates an event handler for interpreting "escape", "return", and "blur"
  // on a text field and calling "ok" or "cancel" callbacks.
  var make_okcancel_handler = function (options) {
    var ok = options.ok || function () {};
    var cancel = options.cancel || function () {};

    return function (evt) {
      if (evt.type === "keydown" && evt.which === 27) {
        // escape = cancel
        cancel.call(this, evt);
      } else if (evt.type === "keyup" && evt.which === 13) {
        // blur/return/enter = ok/submit if non-empty
        var value = String(evt.target.value || "");
        if (value)
          ok.call(this, value, evt);
        else
          cancel.call(this, evt);
      }
    };
  };//added as test

    Template.entry.events = {};

    Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
      ok:function(text, event){
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
          var ts = Date.now() / 1000;
          Messages.insert({name: nameEntry.value, message: text, time: ts});
          event.target.value = "";
        }//if statment ends
      }
    });

    if (Meteor.isServer) {
  Template.entry.events({
    'click #submit': function() {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
});
}




  Template.messages.messages = function () {
    return Messages.find({}, { sort: {time: -1} });
  };
}

ここにhtmlファイルのチュートリアル 全体があります

<body>
 {{> entry}}

 {{> messages}}
</body>

<template name="entry">
    <p>
    <input type="text" id="name" placeholder="your name">
    <input type="text" id="messageBox" placeholder="your message">
    <input type="button" id="submit">
    </p>
</template>

<template name="messages">
    {{#each messages}}
        {{> message}} <!--echo of message template-->
    {{/each}}
</template>

<template name="message">
    <p><strong>{{name}}:</strong>{{message}}</p>
</template>
4

2 に答える 2

3

クリック用のイベントハンドラーを追加するだけです（の間にMeteor.isClient）

Template.entry.events['click #submit'] = function() {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
于 2013-02-16T15:04:22.993 に答える
0

これを書く最もクリーンな方法は (コーヒースクリプトを使用していない場合は、使用する必要があります)、次のとおりです。

JavaScript で

Template.entry.events({
 'click #submit' : function(event) {
        var nameEntry = document.getElementById('name');
        if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
        }
    }
})

コーヒースクリプトで

Template.entry.events 
    "click #submit": (event) ->
      nameEntry = document.getElementById("name")
      unless nameEntry.value is ""
        ts = Date.now() / 1000
        Messages.insert
          name: nameEntry.value
          message: $("#messageBox").val()
          time: ts
于 2013-02-17T14:17:00.997 に答える