Question

我有一个按钮，我想在点击时提醒一条消息。如果我通过脚本调用该函数，它将提醒消息，然后每当我点击按钮时它也会提醒消息;这就像我期望的那样有效。但是，当我从脚本中注释掉手动调用并且仅依靠按钮时，它将不会运行警报。

app.js：

$(function(){    
  var AddButton = Backbone.View.extend({
    tagName: 'button',
    className: 'btn btn-primary',
    id: 'addButton',
    events: {'click button': 'addUser'},
    initialize : function(){
      this.template = _.template('Add Button');
      this.render();
    },

    render: function(){
      this.$el.html(this.template());
      $('#buttonHook').append(this.$el);
      return this;
    },

    addUser: function(event){
      alert('yo');
    }
  });

  var test = new AddButton();
  //test.addUser();    
});

的index.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="app.js" defer></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" defer>
</head>
<body>
<br>
<div class="container">
  <div class="col-sm-6">
  <!-- input group -->
  <form>
    <div class="form-group">
        <label for="inputFirst">First Name</label>
        <input type="text" class="form-control" id="inputFirst" placeholder="Enter First Name">
    </div>
    <div class="form-group">
        <label for="inputLast">Last Name</label>
        <input type="text" class="form-control" id="inputLast" placeholder="Enter Last Name">
    </div>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="text" class="form-control" id="inputEmail" placeholder="Enter Email">
    </div>
    <div id="buttonHook"></div> <!-- Button goes in right here -->
  </form>
  <br><br>
  </div>

  <!-- Table -->
  <div class="col-sm-6 users">
    <div class="panel panel-default"> <!-- beginning of user -->
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>Name:</td>
            <td><span class="glyphicon glyphicon-user">James</span></td>
          </tr>
          <tr>
            <td>Email:</td>
            <td><span class="glyphicon glyphicon-envelope">james@gmail.com</span></td>
          </tr>
          <tr>
            <td>Phone:</td>
            <td><span class="glyphicon glyphicon-earphone">123-4567</span></td>
          </tr>
        </tbody>
      </table>
    </div> <!-- end of user -->

    <div class="panel panel-default"> <!-- beginning of user -->
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>Name:</td>
            <td><span class="glyphicon glyphicon-user">Spider Man</span></td>
          </tr>
          <tr>
            <td>Email:</td>
            <td><span class="glyphicon glyphicon-envelope">spider.man@example.com</span></td>
          </tr>
          <tr>
            <td>Phone:</td>
            <td><span class="glyphicon glyphicon-earphone">765-4321</span></td>
          </tr>
        </tbody>
      </table>
    </div> <!-- end of user -->
  </div>
</div>

</body>
</html>

Answer 1

传递事件时出现问题。省略选择器会导致事件绑定到视图的根元素（this.el）。参考this

试试这个：

$(function(){    
  var AddButton = Backbone.View.extend({
    tagName: 'button',
    className: 'btn btn-primary',
    id: 'addButton',
    events: {'click': 'addUser'},
    initialize : function(){
      this.template = _.template('Add Button');
      this.render();
    },

    render: function(){
      this.$el.html(this.template());
      $('#buttonHook').append(this.$el);
      return this;
    },

    addUser: function(event){
      alert('yo');
    }
  });

  var test = new AddButton();
  //test.addUser();    
})

除非首次在脚本中调用，否则Backbone.js函数不起作用

1 个答案: