Backbone.js新手，如何從html按鈕和鏈接調用函數

我是Backbone.js的新手，我通過各種示例瞭解了這一點。現在我有點卡在我一直在做的事情上。Backbone.js新手，如何從html按鈕和鏈接調用函數

正如你可以看到我有一個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

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

來源

2012-08-10 Yasser

請 See Demo 或與我下面的代碼替換代碼

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-10 07:00:18 gaurang171

謝謝你！我的印象是我可以在div外鏈接，只是在工作時得到了這個清除，現在這對我來說很有意義......謝謝@keyur – Yasser 2012-08-10 07:16:16

實現此代碼這應該工作。

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-10 07:46:50 gaurang171

好的，。謝謝你會檢查它 – Yasser 2012-08-10 08:00:02

很好的構建解決方案在這裏。

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-16 06:18:31

一個小提琴鏈接將是有益的 – Yasser 2013-01-16 06:26:14

Backbone.js新手，如何從html按鈕和鏈接調用函數

回答

相關問題