如何在流星中通过id获取表单输入值

时间:2016-06-29 10:14:32

标签: javascript meteor edit meteor-accounts

我是流星框架的新手。现在我在我的本地服务器上练习。我已经通过流星添加了我的所有数据,但现在我想编辑我的数据。我试图编辑我的数据但无法获得所有值。下面是我的所有代码。

<head>
  <title>Login page</title>
</head>

<body>
  {{> facebooktest}}
  {{> usersDetails}}
</body>

<template name="usersDetails">
  <table class="userdetailstable">
    <tr>
      <th>#Id</th>
      <th>Email Address</th>
      <th>Name</th>
      <th>Username</th>
      <th>Password</th>
      <th>Created</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
    {{#each returnRegistrationData}}
      <tr>
        <td>{{_id}}</td>
        <td>{{email}}</td>
        <td>{{name}}</td>
        <td>{{username}}</td>
        <td>{{created}}</td>
        <td>{{password}}</td>
        <td><button class="delete-entry btn btn-primary" id="edit-entry">Edit</button></td>
        <td><button class="delete-entry btn btn-danger" id="delete-entry">Delete</button></td>
      </tr>
    {{/each}}

  </table>

</template>


<template name="facebooktest">

  <div class="container">
    <button class="login-button">Login From here</button>
    <button class="registration"> Registration </button>
  </div>

   <div class="modal fade" id="login-page">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Login</h4>
        </div>
        <form class="login-form" id="login-form">
          <div class="modal-body">
              <label for="name">Username</label>
              <input type="text" id="username" class="username" placeholder="Username" value="" />
              <label for="name">Password</label>
              <input type="password" id="password" class="password" placeholder="Password" value="" />
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="save">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </form>

      </div>
    </div>
  </div>

   <div class="modal fade" id="registration-page">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Registration</h4>
        </div>
        <form class="login-form" id="login-form">
          <div class="modal-body">
              <label for="name">Email</label>
              <input type="email" id="email" class="email" placeholder="email@example.com" value="{{email}}" required />
              <label for="name">Your Name</label>
              <input type="text" id="name" class="name" placeholder="Your Name" value="{{name}}" required/>
              <label for="name">Username</label>
              <input type="text" id="username" class="username" placeholder="Username" value="{{username}}" required/>
              <label for="name">Password</label>
              <input type="password" id="password" class="password" placeholder="Password" value="{{password}}" required/>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" id="registration-added">Add</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </form>

      </div>
    </div>
  </div>

</template>

在我的JS文件代码下面

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Registration } from '../db/database.js';
import './main.html';

Template.body.events({
  'click .login-button' : function(event)
  {
    event.preventDefault();
    $('#login-page').modal('show');
  },
  'click .registration' : function(event)
  {
    event.preventDefault();
    $('#registration-page').modal('show');
  }
});

Template.usersDetails.helpers({
    returnRegistrationData : function()
    { 
        return Registration.find({});
    }
});

Template.usersDetails.events({
    'click #delete-entry' : function(event)
    {  //console.log(event.target);
        Registration.remove(this._id);
    },
    'click #edit-entry' : function(event)
    {
        $('#registration-page').modal('show');

        var editdata = Registration.find(this._id);
        console.log(editdata.target);
    }
});

当我们点击按钮时,我正在使用模态框。我只想获得编辑按钮行值。

http://i.imgur.com/cz79YN9.png

Template.facebooktest.events({
    'submit #login-form'  : function(event)
    {
        event.preventDefault();
        const target = event.target;
        var username = target.username.value;
        var password = target.password.value;

        if(username == '')
        {
            alert('Please enter your username.');
            return false;
        }
        else if(password == '')
        {
            alert('Please enter your password.');
            return false;
        }
        else 
        {   
            var selectmethod =  Registration.find({
                "name" : username,
                "password" : password
            });
             console.log(selectmethod);
            $('#login-page').modal('hide');
        }
    },
    'submit #registration-page' : function(event)
    {
        event.preventDefault();

        const target    = event.target;
        const email     = event.target.email.value;
        const name      = event.target.name.value;
        const username  = event.target.username.value;
        const password  = event.target.password.value;

        Registration.insert({
            email,
            name,
            username,
            password,
            created : new Date(),
        });
        event.target.email.value = '';
        event.target.name.value = '';
        event.target.username.value = '';
        event.target.password.value = '';
        $('#registration-page').modal('hide');

    }
});

// db.registration.insert({ email: "test@sad.com",name: "test@sad.com",username: "test@sad.com",password: "123456", createdAt: new Date() });

0 个答案:

没有答案