Meteor的表单提交:Form

instein 发布于2019-06-26 16:58 / 789人阅读

摘要：中的在中时时刻刻都不能离开，表单提交来看看在里面如何提交表单吧首先是这里我们定义了一个表单，为，有一个的还有一个提交的按钮。

Meteor中的form

在web中时时刻刻都不能离开form，表单提交,来看看在meteor里面如何提交表单吧！
首先是 HTML:


    meteor-form



form

    
        
        
    

Welcome to Meteor!

{{> meteor_collection }}

这里我们定义了一个表单，class为new-lanuage，有一个text的 input还有一个提交的按钮。下面的模板meteor_collection是用来显示的。

给表单添加事件

if (Meteor.isClient) {

    Template.meteor_collection.helpers({
        languages: Languages.find({}, {sort: {createdAt: -1}})
    });

    Template.body.events({
        "submit .new-language": function (event) {
            event.preventDefault()
            var text = event.target.text.value
            console.log(event)
            Languages.insert({
                name: text,
                createdAt: new Date()
            })
            event.target.text.value = ""
        }
    });

}

使用Template.templateName.events(...)可以给模板添加事件，可以是submit,click ,hover...,function里面可以做相应的处理，这里使用.new-language是css的选择器，用来指定form.
event是事件提交的参数，包括事件提交的所有内容。
可以使用consloe.log(event)在浏览器中看到event的属性：

对结果排序

在插入的时候，多加了一个字段createdAt，我们可以按照时间的倒序对 languages进行排序：

languages: Languages.find({}, {sort: {createdAt: -1}})

使用meteor run 运行项目之后，可以打开两个浏览器，在其中一个浏览器中添加一个语言，就能在另一个浏览器中立刻看到。

项目地址：https://github.com/jjz/meteor/tree/master/meteor-form

GPU云服务器云服务器 js提交本form表单的数据 form表单提交 form表单提交input form表单提交json

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/18815.html

翻译 Meteor React 制作 Todos - 04 - 表单与事件

摘要：通过表单添加任务在这个步骤，我们将为用户在列表上添加输入框。在中，这是一种监听浏览器事件的方式，就像是在表单上有提交事件一样。这对一个任务列表来说并不是非常好。在下一步，我们将给待办事宜的列表添加一个非常重要的功能已完成功能和删除功能通过表单(form)添加任务在这个步骤，我们将为用户在列表上添加输入框。首先，在App.jsx文件中App组件上添加表单吧。 Tod...

Hujiawei 2019-08-21 10:43 评论0 收藏0
Meteor其他事件的处理

摘要：在之前的表单提交中介绍的就是操作。之前没有数据的字段在这个位置会显示为操作这里给为的添加一个事件，更新这个的为当前时间。操作通过主键对对象进行删除操作。除了表单提交以外，还有我们日常用到的CRUD操作，对object操作的四个方法: Read/Insert/Update/DeleteRead这个在一开始的例子中就有说到的:db.object.find(),通过Tempalte.tem...

刘永祥 2019-06-26 16:58 评论0 收藏0
javascript项目开发规范实例

摘要：首次发表在个人博客总结一下个人在开发及同事代码的过程中遇到的因为一些项目规范带来的问题及认为比较好的解决方法由于个人经验和认知水平有限下面仅代表我的个人观念欢迎各位大佬多给我提建议以本人最近写的一个项目技术栈为为例的使用因为一个项目往 showImg(http://upload-images.jianshu.io/upload_images/3297464-ccdb78e5d7d158...

sorra 2019-08-21 17:54 评论0 收藏0
form表单那点事儿(下) 进阶篇

摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。表单操作取值用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： ...

jerryloveemily 2019-08-01 15:24 评论0 收藏0