Meteor的表单提交:Form

Meteor中的form

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

    



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