2017-10-07 117 views
-2

我试图创建一个应用程序,它在输入字段中输入后保存信息!我在添加具有多个输入字段的表单时遇到了一些问题。如何在Meteor.js中添加所有表单的元素?

这是我的HTML和JS文件:

import { Template } from 'meteor/templating'; 

import { Tasks } from '../api/tasks.js'; 

import './body.html'; 

Template.body.helpers({ 
    tasks() { 
    // Show newest tasks at the top 
    return Tasks.find({}, { sort: { createdAt: -1 } }); 
    }, 
}); 

Template.body.events({ 
    'submit .new-task'(event) { 
    // Prevent default browser form submit 
    event.preventDefault(); 

    // Get value from form element 
    const target = event.target; 
    const text = target.text.value; 

    // Insert a task into the collection 
    Tasks.insert({ 
     text, 
     createdAt: new Date(), // current time 
    }); 

    }, 
}); 
<body> 
    <div class="container"> 
    <header> 

     <form class="new-task"> 
     <input type="text" name="text" placeholder="Type to add new tasks" /> 
     </form> 
    </header> 

    <ul> 
     {{#each tasks}} 
     {{> task}} 
     {{/each}} 
    </ul> 
    </div> 
</body> 

<template name="task"> 
    <li>{{text}}</li> 
</template> 

请告诉我,我怎么可能增加超过2个输入,并通过点击提交按钮显示呢?

+0

很难理解什么是你的问题。但是,您是否尝试重复使用替换name =“text”并替换属性名称并相应修改数据引用? – AirBorne04

回答

1

这真的不清楚你的问题是什么。这可能就像包含第二个文本字段一样简单,并将其与第一个字段同时保存到mongo中?

HTML:

<form class="new-task"> 
    <input type="text" name="text" placeholder="Type to add new tasks" /> 
    <input type="text" name="text2" placeholder="Type to add something else" /> 
</form> 

JS:

const target = event.target; 
const text = target.text.value; 
const text2 = target.text2.value; 

Tasks.insert({ text, text2, createdAt: new Date() }); 
+0

您的代码工作不到风度( 在Object.click .subm(body.js无法读取的不确定 属性 '值':20) -const文本= target.text.value; - 这条( –

+0

抱歉。 这是我的错误 你的代码工作谢谢) 更改答案PLS-为:! 常量目标= event.target; 常量文本= target.text.value; 常量文本2 = target.text2.value; ({text,text2,createdAt:new Date()}); target.text.value =''; target.text2.value =''; –

相关问题