在不使用額外的情況下在流星中提交表格

Question

我希望在我的Meteor html模板中有一個表單，並提交將數據插入到我的MongoDB列表中。我的問題是：

• 這可能沒有使用額外的軟件包？我可以添加一個HTML表單作爲模板嗎？
• 提交事件是否適用於最新流星？
• 我讀過了，我們可以使用提交按鈕的點擊事件：你能告訴我怎麼去尋找我的DOM我的輸入元素的值？ （不使用jQuery？）

Answer 1

jquery是包含在流星&非常簡化，你爲什麼要避免它？其相當長的時間與手動遍歷DOM JS

你可以使用JavaScript來提交表單AJAX風格：

所以你可以只使用普通的HTML表單在你的模板像往常一樣：

// HTML 
<form id="myform"> 
    <input type="text" name="firstname"/> 
    <input type="text" name="lastname"/> 
    <input type="text" name="email"/> 
    <input type="submit" id="submit"/> 
</form> 


// Client JS 
function submitme() { 
    form = {}; 

    $.each($('#myform').serializeArray(), function() { 
     form[this.name] = this.value; 
    }); 

    // Do validation on 
    // form = { 
    //  firstname: 'first name', 
    //  lastname: 'last name', 
    //  email: 'email@email.com' 
    // } 

    MyCollection.insert(form, function(err) { 
     if(!err) { 
      alert("Submitted!"); 
      $('#myform')[0].reset(); 
     } else { 
      alert("Something is wrong"); 
      console.log(err); 
     } 
    }); 

} 

點擊後你可以綁定選擇按鈕來插入數據：

事件地圖結合：

Template.templatename.events({ 
    'submit' : function(event) { 
     event.preventDefault(); //prevent page refresh 
     submitme(); 
    } 
}); 

如果HATE jQuery的&不能在所有

// HTML 
<form id="myform"> 
    <input id="firstname" type="text" name="firstname"/> 
    <input id="lastname" type="text" name="lastname"/> 
    <input id="email" type="text" name="email"/> 
    <input type="submit" id="submit"/> 
</form> 

// Client JS 
function submitme() { 

    form = { 
     firstname: firstname.value, 
     lastname: lastname.value, 
     email: email.value 
    }; 

    // Do validation on 
    // form = { 
    //  firstname: 'first name', 
    //  lastname: 'last name', 
    //  email: 'email@email.com' 
    // } 

    MyCollection.insert(form, function(err) { 
     if (!err) { 
      alert("Submitted!"); 

      // Empty field values 
      email.value = ""; 
      firstname.value = ""; 
      lastname.value = ""; 
     } else { 
      alert("Something is wrong"); 
      console.log(err); 
     } 
    }); 
} 

Answer 2

僅供參考使用，有做流星的形式沒有所有的全球jQuery的引用一個稍微乾淨的方式，我覺得這混亂。它通過對事件處理程序中提供的模板進行作用域使代碼更容易出錯。下面是使用對方的回答中描述的形式的例子：

模板代碼：

<template name="foo"> 
    <form id="myform"> 
     <input type="text" name="firstname"/> 
     <input type="text" name="lastname"/> 
     <input type="text" name="email"/> 
     <input type="submit" id="submit"/> 
    </form> 
</template> 

事件處理程序：

Template.foo.events({'submit form' : function(event, template) { 
    event.preventDefault(); 

    firstname = template.find("input[name=firstname]"); 
    lastname = template.find("input[name=lastname]"); 
    email = template.find("input[name=email]"); 

    // Do form validation 

    var data = { 
     firstname: firstname.value, 
     lastname: lastname.value, 
     email: email.value 
    }; 

    email.value=""; 
    firstname.value=""; 
    lastname.value=""; 

    MyCollection.insert(data, function(err) { /* handle error */ }); 

}}); 

Answer 3

所有的最簡單，最簡單的解決方案。

// HTML 
<template name="formTemplate"> 
    <form> 
     <input type="text" name="firstname"/> 
     <input type="text" name="lastname"/> 
     <input type="submit" id="submit"/> 
    </form> 
</template> 

// JavaScript 
Template.formTemplate.events({ 
    'submit form': function(event, template) { 
     event.preventDefault(); // prevent page reload 
     var firstname = event.target.firstname.value; 
     var lastname = event.target.lastname.value; 
    } 
}); 

Answer 4

這不是完全回答你的問題。但這是我該怎麼做的。

1. 流星添加aldeed：自動窗體

   你已經有

2. 示例模式...

   Books = new Mongo.Collection("books"); 
    
   Books.attachSchema(new SimpleSchema({ 
    
       title: { 
    
       type: String, 
    
       label: "Title", 
    
       max: 200 
    
       }, 
    
       author: { 
    
       type: String, 
    
       label: "Author" 
    
       }, 
    
       copies: { 
    
       type: Number, 
    
       label: "Number of copies", 
    
       min: 0 
    
       }, 
    
       lastCheckedOut: { 
    
       type: Date, 
    
       label: "Last date this book was checked out", 
    
       optional: true 
    
       }, 
    
       summary: { 
    
       type: String, 
    
       label: "Brief summary", 
    
       optional: true, 
    
       max: 1000 
    
       } 
    
   }));

3. books.tpl。玉（從mquandalle：玉）

+quickForm collection="Books" id="insertBookForm" type="method" meteormethod="insertBook" 

4.

Meteor.methods({ 
 
    'insertBook': function (doc) { 
 
     // server side validation, insert, error etc... 
 
    } 
 
})

這樣，你得到免費的免費，引導造型客戶端驗證，自定義字段可見或樣式，如果你需要。 5分鐘的發展，這是一個非常好的回報。 我會使用強大的軟件包，其他人已經投入了時間和思想，並在其上進行快速構建。

Answer 5

想分享我的方式是真正簡單：

HTML：在非常乾淨的Object {name: "...", email: "..."}

<form id="update-profile"> 
    <div class="form-group"> 
    <input type="text" required class="form-control" name="name" placeholder="Full Name" value="{{profile.name}}"> 
    </div> 
    ... 

JS

Template.profileEditModal.events({ 
     'submit form': function (e, t) { 
     e.preventDefault(); 
     var doc = {}; 

     t.$('input').each(function() { 
      if (this.value) { 
      doc[this.name] = this.value; 
      } 
     }); 
}); 

結果如果你正在使用SimpleSchema做check(doc, Schemas.updateProfile);在其他服務器上的v alidation。