Meteor的表單提交:Form

instein 發(fā)布于2019-06-26 16:58 / 791人閱讀

摘要：中的在中時時刻刻都不能離開，表單提交來看看在里面如何提交表單吧首先是這里我們定義了一個表單，為，有一個的還有一個提交的按鈕。

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是事件提交的參數(shù)，包括事件提交的所有內(nèi)容。
可以使用consloe.log(event)在瀏覽器中看到event的屬性：

對結(jié)果排序

在插入的時候，多加了一個字段createdAt，我們可以按照時間的倒序?qū)?languages進行排序：

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

使用meteor run 運行項目之后，可以打開兩個瀏覽器，在其中一個瀏覽器中添加一個語言，就能在另一個瀏覽器中立刻看到。

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

GPU云服務器云服務器 js提交本form表單的數(shù)據(jù) form表單提交 form表單提交input form表單提交json

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/18815.html

翻譯 Meteor React 制作 Todos - 04 - 表單與事件

摘要：通過表單添加任務在這個步驟，我們將為用戶在列表上添加輸入框。在中，這是一種監(jiān)聽瀏覽器事件的方式，就像是在表單上有提交事件一樣。這對一個任務列表來說并不是非常好。在下一步，我們將給待辦事宜的列表添加一個非常重要的功能已完成功能和刪除功能通過表單(form)添加任務在這個步驟，我們將為用戶在列表上添加輸入框。首先，在App.jsx文件中App組件上添加表單吧。 Tod...

Hujiawei 2019-08-21 10:43 評論0 收藏0
Meteor其他事件的處理

摘要：在之前的表單提交中介紹的就是操作。之前沒有數(shù)據(jù)的字段在這個位置會顯示為操作這里給為的添加一個事件，更新這個的為當前時間。操作通過主鍵對對象進行刪除操作。除了表單提交以外，還有我們?nèi)粘Ｓ玫降腃RUD操作，對object操作的四個方法: Read/Insert/Update/DeleteRead這個在一開始的例子中就有說到的:db.object.find(),通過Tempalte.tem...

劉永祥 2019-06-26 16:58 評論0 收藏0
javascript項目開發(fā)規(guī)范實例

摘要：首次發(fā)表在個人博客總結(jié)一下個人在開發(fā)及同事代碼的過程中遇到的因為一些項目規(guī)范帶來的問題及認為比較好的解決方法由于個人經(jīng)驗和認知水平有限下面僅代表我的個人觀念歡迎各位大佬多給我提建議以本人最近寫的一個項目技術棧為為例的使用因為一個項目往 showImg(http://upload-images.jianshu.io/upload_images/3297464-ccdb78e5d7d158...

sorra 2019-08-21 17:54 評論0 收藏0
form表單那點事兒(下) 進階篇

摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發(fā)送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發(fā)事件。上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。表單操作取值用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

jerryloveemily 2019-08-01 15:24 評論0 收藏0