2014-06-20 4 views
0

API 상단에 백본이있는 프론트 엔드를 구축하고 있는데 change 이벤트가 트리거되지 않는 이유가 궁금합니다. 가져 오기 및 저장이 작동하지만 템플릿이 다시 렌더링되지 않습니다.모델 변경시 백본 컬렉션 변경이 트리거되지 않음

컬렉션

var Clients = Backbone.Collection.extend({ 
    url: API.host + '/clients', 
    model: Client 
}); 

모델

var Client = Backbone.Model.extend({ 
    urlRoot: API.host + '/clients', 
    defaults: { 
    clients: { 
     number: '', 
     company: '', 
     address1: '', 
     address2: '', 
     city: '', 
     zip: '', 
     country: '', 
     tax: '', 
     email: '', 
     phone: '' 
    } 
    } 
}); 

보기 당신은 때 컨텍스트를 통과해야합니다

var ClientsView = Backbone.View.extend({ 

    id: 'content', 

    initialize: function() { 

    // instantiate Collection 
    this.model = new Clients(); 

    // compile Handlebars template 
    this.tpl = Handlebars.compile(this.template); 

    // bind change and reset model events to rerender template 
    this.model.bind('change', this.render); 
    this.model.bind('reset', this.render); 
    }, 

    render: function() { 

    var self = this; 
    var obj = this.el; 

    // get clients and set data to handlebars template 
    $.when(this.model.fetch()).then(function(response) { 
     $(obj).html(self.tpl(response)); 
    }, function() { 
     $(obj).html(self.tpl); 
    }); 

    return this; 
    }, 

    events: { 
    "click #client-save": "save" 
    }, 

    save: function(e) { 

    // cache target and parent object for quick form access 
    var obj = e.target; 
    var parent = $(obj).closest('#client-modal'); 

    var client = new Client({ 
     clients: { 
     number: parent.find('[name="number"]').val(), 
     company: parent.find('[name="company"]').val(), 
     address1: parent.find('[name="address1"]').val(), 
     address2: parent.find('[name="address2"]').val(), 
     city: parent.find('[name="city"]').val(), 
     zip: parent.find('[name="zip"]').val(), 
     country: parent.find('[name="country"]').val(), 
     tax: parent.find('[name="tax"]').val(), 
     email: parent.find('[name="email"]').val(), 
     phone: parent.find('[name="phone"]').val(), 
     web: parent.find('[name="web"]').val() 
     } 
    }); 

    client.save(); 

    return false; 

    } 

}); 

답변

1

당신은 당신의 기능을 묶는다.

this.model.bind ('변화', this.render, ) 컬렉션 인스턴스에 대해 다른 이름을 사용하는

보십시오.

// Example 
this.collectionClients = new Clients(); 

\ 0/

+0

'this.model.bind ('변화', this.render,이)'속임수를 썼는지! :)하지만 왜 내 컬렉션 인스턴스에 다른 이름을 사용해야합니까? – Slevin

+0

뷰 내에서 model이라는 변수를 만들면 컨벤션을위한 백본은 뷰에 모델이 첨부되어 있다고 가정합니다. 이것은 사용자의 cenario가 아닙니다. – rcarvalho

+0

'this.collection'은보기에서 'this.model'과 동일한 특별한 처리를하는 컬렉션 속성의 일반적인 이름입니다. ['listenTo'] (http://backbonejs.org/#Events-listenTo)는 보통'bind'보다는 이벤트를 연결하는 더 좋은 방법입니다. –

관련 문제