Question

我在页面左侧有一个输入表单，当您输入一些数据时，它会在页面的右半部分填充用户数据。

我希望能够点击任何用户的<td>元素，并在显示文本框时隐藏<td>。我们的想法是能够点击一个元素，然后你可以突然编辑它。我坚持第一步 - 隐藏现有元素。

这个想法是，如果在任何给定行中有两个<td>元素占据第二和第三位置，并且其中一个元素被隐藏而另一个元素可见，则之间的交换将显示为相同的位置正在改变元件。

p1.html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
    <script type="text/javascript" src="./node_modules/jquery/dist/jquery.min.js" defer></script>
  <script type="text/javascript" src="./node_modules/backbone/node_modules/underscore/underscore-min.js" defer></script>
    <script type="text/javascript" src="./node_modules/backbone/backbone-min.js" defer></script>
  <script type="text/javascript" src="p1.js" defer></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" defer>
</head>
<body>
<br>

<div id="appView" class="container">
  <!-- INPUTS -->
  <div class="col-sm-6">
    <form>
      <div class="form-group">
          <label>First Name</label>
          <input type="text" class="form-control" id="inputFirst" placeholder="Enter First Name">
      </div>
      <div class="form-group">
          <label>Last Name</label>
          <input type="text" class="form-control" id="inputLast" placeholder="Enter Last Name">
      </div>
      <div class="form-group">
          <label>Email</label>
          <input type="text" class="form-control" id="inputEmail" placeholder="Enter Email">
      </div>
      <div class="form-group">
          <label>Phone Number</label>
          <input type="text" class="form-control" id="inputPhone" placeholder="Enter Phone Number">
      </div>
    </form>
  </div>

  <!-- USER TABLE -->

  <!-- Table -->
  <div class="col-sm-6 users" id="userList">

  </div> <!-- end of col-sm-6 -->
</div> <!-- end appView, container -->


<script type="text/template" id="userTemplate">
  <div class="panel panel-default">
    <table class="table table-striped">
      <tbody>
        <tr>
          <button type="button" class="close delete" data-dismiss="lightbox" aria-hidden="true">&times;</button>
          <td>Name:</td>
          <td>
            <div class="nameHide"> <span class="glyphicon glyphicon-user"> <%= first %> <%- last %> </span>
            </div>
            <input type="text" class="nameEdit" placeholder="New First Name..." hidden>
          </td>
        </tr>

        <tr>
          <td>Email:</td>
          <td class="emailHide"><span class="glyphicon glyphicon-envelope"> <%- email %></span></td>
        </tr>

        <tr>
          <td>Phone:</td>
          <td><span class="glyphicon glyphicon-earphone"> <%- phone %></span></td>
        </tr>

      </tbody>
    </table>
  </div>
</script>
<style>
  .glyphicon .glyphicon-user {
    padding-right: 5px;
  }
</style>
</body>
</html>

p1.js：

(function($){
  //USER
    var User = Backbone.Model.extend({});

  //USERLIST
  var UserList = Backbone.Collection.extend({
    model: User
  });
  var userList = new UserList;

  //USERVIEW
  var UserView = Backbone.View.extend({
    events: {
      "click .delete": "deleteUser",
      "click .nameHide": "editUser"
    },
    template: _.template($('#userTemplate').html()),

    initialize: function(){
      this.listenTo(this.model, 'destroy', this.remove);
    },

    render: function(){
      this.$el.html(this.template(this.model.toJSON()));
      return this;
    },

    deleteUser: function() {
      this.model.destroy();
    },

    //THIS IS THE ONE I HAVE A QUESTION ABOUT!!!!!
    editUser: function() {
      this.$('nameHide').style.display="none";
      this.$('.nameEdit').style.display="inline";
    }
  });


  //APPVIEW
    var AppView = Backbone.View.extend({
        el: $('#appView'),
    events: {
      'keypress #inputFirst': 'addUser',
      'keypress #inputLast': 'addUser',
      'keypress #inputEmail': 'addUser',
      'keypress #inputPhone': 'addUser'
    },
        initialize: function(){
      this.inputFirst = this.$('#inputFirst');
      this.inputLast = this.$('#inputLast');
      this.inputEmail = this.$('#inputEmail');
      this.inputPhone = this.$('#inputPhone');
            _.bindAll(this, 'render');
            this.listenTo(userList, 'add', this.pushUser);
        },

        render: function(){
            //$('#userList').append("<li>yo</li>");
        },

    addUser: function(e) {
      if (e.keyCode != 13) return;
      if (!this.inputFirst.val()) return;
      var validEmail = this.isEmailValid(this.inputEmail.val());
      if (!validEmail) return;
      e.preventDefault();
      userList.create({
        first: this.inputFirst.val(),
        last: this.inputLast.val(),
        email: this.inputEmail.val(),
        phone: this.inputPhone.val()
      });
    },

    //checks to see if the email is valid, returns false if not, as in "no, this is not valid"
    isEmailValid: function(email) {
      atPos = email.indexOf("@");
      stopPos = email.lastIndexOf(".");
      stopPosLast = email.indexOf(".");
      if (atPos === -1 || stopPos === -1) return false;
      if (stopPos - atPos <= 1) return false;
      if (atPos == 0) return false;
      if (stopPosLast < 2) return false; //can't put upper bound on domain length because of new TLDs
      return true;
    },

    pushUser: function(user) {
      var userView = new UserView({model: user});
      this.$('#userList').append(userView.render().el);
      this.inputFirst.val("");
      this.inputLast.val("");
      this.inputEmail.val("");
      this.inputPhone.val("");
    }
    });

    var appView = new AppView();

}) (jQuery);

Backbone：交换元素而不破坏表

0 个答案: