CODEWITHSUNDEEP
javascriptember.js
ario
ario

Reputation: 1787

Emberjs code running out of order

Here, RootView draws an initial view, then creates a BranchObj, which in its init function looks for RootView's branchView and tries to stick another view onto it.

The problem is, even though Line 1 (which should cause console to log "1") is written before Line 2 (which should cause console to log "2"), the console logs "2" before "1", which gives an error because BranchObj can't find the view it's looking for in RootView's branchView.

How do I make the two functions run in the right order?

App.RootView = Ember.CollectionView.extend({
  ...

  didInsertElement: function() {
    //draw this branch
    var branchView = App.BranchView.create();
    this.set("branchView",branchView);
    this.get("childViews").pushObject(branchView); //Line 1

    //draw a child
    App.BrachObj.create({parentView:this}); //Line 2
  }
});

App.BranchView = App.RaphaelView.extend({
  didInsertElement: function() {
    console.log(1);
  },
  ...
});

App.BranchObj = Ember.Object.extend({
  init: function() {
    console.log(2);
  },
  ...
});

Upvotes: 1

Views: 64

Answers (1)

wewals
wewals

Reputation: 1447

From the Ember docs on CollectionView http://emberjs.com/api/classes/Ember.ContainerView.html

The childViews property of a CollectionView should not be directly manipulated. Instead, add, remove, replace items from its content property. This will trigger appropriate changes to its rendered HTML.

It appears that direct array manipulation using pushObject doesn't fire the didInsertElement event. Instead that is fired after the init of BranchObj (line 2). Try manipulation using the content property instead.

Upvotes: 1

Related Questions