0

私は Backbone.js が初めてで、さまざまな例を通してこれを学んでいます。今、私は自分がやってきたことに少し行き詰まっています。

フィドル リンク: http://jsfiddle.net/eSvA8/

ご覧のとおり、1 つの html ボタンと 1 つのリンクがあり、ボタンとリンクaddItemを使用して関数を呼び出したいと考えています。addBtnaddLink

これについて誰かが私を助けてください。以下は私が使用しているコードです。

Backbone.js を使用する私の Javascript

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