当前位置: 首页 > news >正文

Meteor的表单提交:Form

Meteor中的form

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

<head>
    <title>meteor-form</title>
</head>

<body>
<h2>form</h2>
<div class="container">
    <form class="new-language">
        <input type="text" name="text" placeholder="add language"/>
        <input type="submit" value="Submit"/>
    </form>
</div>
<h2>Welcome to Meteor!</h2>

{{> meteor_collection }}

</body>

<template name="meteor_collection">
    {{#each languages}}
        <h3>{{name}}</h3>
    {{/each}}
</template>

这里我们定义了一个表单,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

相关文章:

  • 设置全局git忽略文件 gitconfig
  • SQLServer中查询表结构(表主键 、列说明、列数据类型、所有表名)的Sql语句
  • 集合的划分(递归)
  • CAS (6) —— Nginx代理模式下浏览器访问CAS服务器网络顺序图详解
  • 函数分析题
  • 使用 Kanban精益创新
  • Override使用对象
  • android studio 2 3 的maven坑
  • SSM框架
  • 内核定时器的简单应用
  • python编程笔记--字符编码
  • 增、删、改、查,数据库和表操作
  • Confluence 6 管理和恢复空间管理权限
  • iOS 系统授权开发
  • Kubernetes首爆严重安全漏洞,请升级你的Kubernetes
  • #Java异常处理
  • 【剑指offer】让抽象问题具体化
  • CAP理论的例子讲解
  • create-react-app项目添加less配置
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • MQ框架的比较
  • nginx 负载服务器优化
  • PHP CLI应用的调试原理
  • SQLServer插入数据
  • SQLServer之索引简介
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • Web标准制定过程
  • 阿里云Kubernetes容器服务上体验Knative
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 入口文件开始,分析Vue源码实现
  • 小程序开发之路(一)
  • 一个项目push到多个远程Git仓库
  • 容器镜像
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • #NOIP 2014#Day.2 T3 解方程
  • (附源码)python旅游推荐系统 毕业设计 250623
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (附源码)计算机毕业设计SSM智慧停车系统
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .net core 3.0 linux,.NET Core 3.0 的新增功能
  • .NET开源项目介绍及资源推荐:数据持久层 (微软MVP写作)
  • ??myeclipse+tomcat
  • []利用定点式具实现:文件读取,完成不同进制之间的
  • [20150321]索引空块的问题.txt
  • [Angular] 笔记 16:模板驱动表单 - 选择框与选项
  • [BPU部署教程] 教你搞定YOLOV5部署 (版本: 6.2)
  • [BZOJ1040][P2607][ZJOI2008]骑士[树形DP+基环树]
  • [Deepin 15] 编译安装 MySQL-5.6.35
  • [iOS]-UIKit
  • [JavaScript]如何讓IE9, IE8, IE7, IE6關閉視窗時不彈出對話訊息
  • [Lucene] Lucene 全文检索引擎简介