2011-02-05 11 views
22

Basit bir yapılacaklar listesi var ve hepsi beklendiği gibi işleniyor, ancak düzenleme formundaki gönder düğmesini tıklattığımda, form gönderilir (GET/todo_items) ve sayfa yeniden yüklenir, yalnızca düzenleme formunu gösterir. . "Gönderme formu" etkinliği bağlı değil ve nedenini anlayamıyorum. Neyi kaçırıyorum? Ben açıkça görünümde el ayarlayın ve render işlevinde $(this.el) kullandıktan sonraBackbone.js: Bu etkinlik neden bağlantılı değil?

<script id="edit_form" type="text/html"> 
    <form> 
    <label for="title">Title:</label> 
    <input name="title" type="text" value="{{title}}" /> 
    <button>Save</button> 
    </form> 
</script> 

cevap

25

Backbone, el öğesinde delegateEvents kullanır. "El" belirtmezseniz veya görünümünüzü oluşturmak için "el" kullanmazsanız, olay temsilcisi çalışmayacaktır.

edit = new App.Views.Edit({el: $("#edit_area")}) 

özellikle senin render, görünümünüzü kodunda her yerde this.el o sonuca bakın: Yerine senin, işlemek yapıcısındaki "el" seçeneği olarak geçmesi içinde

$("#edit_area") 

yapmanın .

+0

Bu cevap için teşekkür ederiz, '$ (' # edit_area '). Html ("blah"); 'çalışmıyor. Tüm öğeyi oluşturmak zorunda kalmadan bir öğenin html'sini nasıl ayarlayabilirim? –

0

bununla monkeying birçok saat sonra, işe yaradı:

App.Views.Edit = Backbone.View.extend({ 
    events: { 
    "submit form": "save" 
    }, 
    initialize: function(){ 
    this.render(); 
    }, 
    save: function(){ 
    var self = this; 
    var msg = this.model.isNew() ? 'Successfully created!' : 'Saved!'; 

    this.model.save({ 
     title: this.$('[name=title]').val(), 

     success: function(model, resp){ 
     console.log('good'); 
     new App.Views.Notice({message: msg}); 
     self.model = model; 
     self.render(); 
     self.delegateEvents(); 
     Backbone.history.saveLocation('todo_items/'+ model.id); 
     $('#edit_area').html(''); 
     }, 
     error: function(){ 
     console.log('bad'); 
     new App.Views.Error(); 
     } 
    }); 

    return false; 
    }, 
    render: function(){ 
    $('#edit_area').html(ich.edit_form(this.model.toJSON())); 
    } 
}); 

İşte düzenlemek formu. Tuhaf.

+0

Cevabınızı açıklığa kavuşturur/gönderir misiniz? Teşekkürler! – Matt

+0

Diğer postanızdaki cevabımı görün - http://stackoverflow.com/questions/5624929/backbone-view-el-confusion/5757160#5757160 – LeRoy