Backbone.js的新手，如何从html按钮和链接调用函数

New to Backbone.js, how to call function from html button and link

本文关键字：按钮 html 链接函数调用 js 新手 Backbone 更新时间：2023-09-26

我是Backbone.js的新手，我正在通过各种例子来学习这一点。现在我有点被我一直在做的事情困住了。

小提琴链接： http://jsfiddle.net/eSvA8/

如您所见，我有一个 html 按钮和一个链接，我想使用 addBtn 按钮和addLink链接调用 addItem 函数。

请有人帮我解决这个问题。下面是我正在使用的代码。

我的Javascript使用Backbone.js

var ListView = Backbone.View.extend({
    el: $('#testContainer'),
    events: {
      'click button#add': 'addItem',
      'click button#addBtn': 'addItem',
      'click #addLink': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem'); 
      this.counter = 0;
      this.render();
    },
    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
    },
    addItem: function(){
      this.counter++;
      console.log('inside');
      $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
    }
});
var listView = new ListView();

我的网页

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
</head>
<body>
<div id="testContainer" style="background-color: gray; min-height:200px; min-width:200px; color: white;"></div>
<button id="addBtn">Add using a button control !</button>
<br/>
<a id="addLink" style="cursor:pointer">Add using a simple link</a>
</body>
</html>

请查看演示或者用我下面的代码替换你的代码

.JS：

var ListView = Backbone.View.extend({
        el: $('#testContainer'),
        events: {
          'click button#add': 'addItem',
          'click button#addBtn': 'addItem',
          'click #addLink': 'addItem'
        },
        initialize: function(){
          _.bindAll(this, 'render', 'addItem');
          this.counter = 0;
          this.render();
        },
        render: function(){
          $(this.el).append("<button id='add'>Add list item</button>");
          $(this.el).append("<ul></ul>");
        },
        addItem: function(){
          this.counter++;
          console.log('inside');
          $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
        }
    });
    var listView = new ListView();

.HTML：

<div id="testContainer" style="background-color: gray; min-height:200px; min-width:200px; color: white;">
  <button id="addBtn">
    Add using a button control !
  </button>
  <br/>
  <a id="addLink" style="cursor:pointer">
    Add using a simple link
  </a>
</div>

实现此代码应该可以工作。

var ListView = Backbone.View.extend({
        el: $('#testContainer'),
        events: {
          'click button#add': 'addItem',
          'click button#addBtn': 'addItem',
          'click #addLink': 'addItem'
        },
        initialize: function(){
          _.bindAll(this, 'render', 'addItem'); 
          this.counter = 0;
          this.render();
        },
        render: function(){
          $(this.el).append("<button id='add'>Add list item</button>");
          $(this.el).append("<ul></ul>");
        },
        addItem: function(){
          this.counter++;
          console.log('inside');
          $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
        }
    });
    var listView = new ListView(); 
      $('#addBtn').click(function() {
    if(listView)
        listView.addItem();
});
$('#addLink').click(function() {
    if(listView)
        listView.addItem();
});

Nicely Build Solution 就在这里。

var ListView = Backbone.View.extend({
    el: $('#testContainer'),
    events: {
      'click button#add': 'addItem',
      'click button#addBtn': 'addItem',
      'click #addLink': 'addItem'
    },
    initialize: function(){
      var self = this;
      _.bindAll(this, 'render', 'addItem'); 
      this.counter = 0;
      this.render();
      $("button#addBtn").click(function(){
           self.addItem();
      });
    },
    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
    },
    addItem: function(){
      this.counter++;
      console.log('inside');
      $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
    }
});
var listView = new ListView();