Backbone.js-weergave, dom-toegang werkt niet

We werken aan een web-app met het Django-framework en we gebruiken Backbone.js voor MV-decompositie. We hebben een weergave en roep renderen erop, die een div # main uitwisselt met nieuwe inhoud, zoals deze:

var GoalListView = Backbone.View.extend({
el: $('#main'),

template: _.template($("#swap").html()),

render: function() {
  $(this.el).html(this.template());
  return this;
}

});

Dit werkt zoals we verwachten (het wijzigen van de pagina met de inhoud van de sjabloon), maar in de volgende weergave die we maken, hebben we geen toegang tot een van deze nieuwe DOM-elementen.

 el: $('#newId') 

geeft ons undefined, ook al hebben we een element met id newId in de template die we hebben geruild. De template-swap is op dit moment al gebeurd, dus waarom hebben we geen toegang tot de nieuwe elementen?

EDIT: Bedankt, ik ben het ermee eens dat dit een kwestie van timing is. Maar hoe zit het met evenementen?

events: {
    'keypress #goal-entry': 'createOnEnter'
 },

Dan is er geen optie om de DOM te doorzoeken op de elem om de gebeurtenis aan toe te voegen, toch?

1

1 antwoord

Je moet er zeker van zijn dat $ ('# newId') al in de DOM voorkomt als je deze toewijst aan el . In ons geval, als u een element invoegt dat wordt gebruikt voor de tweede weergave, hoeft u dit in eerste instantie niet te definiƫren, maar moet u het doorgeven aan initialize ():

var SomeView = Backbone.View.extend({
 //do NOT define el or $el or id here
  initialize: function($el) {
    this.$el = $el;
    ... go on do more things...
  }
});

en begin vervolgens de tweede weergave vanaf waar je maar wilt in de app:

var someView = new SomeView($('#someID'));
2
toegevoegd