2012-08-10 61 views
0

我是Backbone.js的新手,我通过各种示例了解了这一点。现在我有点卡在我一直在做的事情上。Backbone.js新手,如何从html按钮和链接调用函数

小提琴链接: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

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

回答

2

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

谢谢你!我的印象是我可以在div外链接,只是在工作时得到了这个清除,现在这对我来说很有意义......谢谢@keyur – Yasser 2012-08-10 07:16:16

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(); 
}); 
+1

好的,。谢谢你会检查它 – Yasser 2012-08-10 08:00:02

0

很好的构建解决方案在这里。

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(); 
+0

一个小提琴链接将是有益的 – Yasser 2013-01-16 06:26:14