Meteor的表单提交:Form-白红宇

Meteor的表单提交:Form

阅读量：6535 次

发布时间：2019-06-24

本文共 1224 字，大约阅读时间需要 4 分钟。

Meteor中的form

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

首先是 HTML:

    meteor-formform
        
             
              
          
     
    
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 运行项目之后，可以打开两个浏览器，在其中一个浏览器中添加一个语言，就能在另一个浏览器中立刻看到。

项目地址：

转载地址：http://uezdo.baihongyu.com/

你可能感兴趣的文章

Meteor中的form

form

Welcome to Meteor!

{ {name}}

给表单添加事件

对结果排序

{
{name}}