0

我是 Backbone.js 的新手，我正在通过各种示例学习这一点。现在我有点卡在我一直在做的事情上。

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

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

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

我的 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

<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>
​
4

3 回答 3

2

请 参阅演示 或用我下面的代码替换您的代码

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>
于 2012-08-10T07:00:18.407 回答
0

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

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();
});
于 2012-08-10T07:46:50.133 回答
0

Nicely Build 解决方案就在这里。

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();
于 2013-01-16T06:18:31.417 回答