Question

我想知道如何在点击输入按钮后让我的输入字段提交数据，我目前已经设置好以便在输入时输入。

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>

Answer 1

只需为点击添加一个事件处理程序（在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});
        }
    }

Answer 2

写这个最干净的方法（如果你没有使用coffeescript，你应该这样做）是

在JavascScript中

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

在CoffeeScript中

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

如何通过单击输入按钮触发功能

2 个答案: