2

I am getting weird behavior in 1.0-pre4. I have an Ember.ContainerView added to my template via {{view Ember.ContainerView viewName="dashboardView"}}. When I push views into its childViews array, the DOM does not update. This was working in pre2.

Here's a jsfiddle. What's even stranger in there is that it seems childViews.length doesn't update...or rather it does and doesn't (?!?), if you look at the direct output from the template vs. childViewCount, which is updated immediately after pushing two views.

Update

Below answer was correct, my jsfiddle should have used .pushObject, not .push()...but my original code actually used .pushObject. Instead it looks like a bug in Firefox 10, see comments on answer.

Update 2

Confirmed against master, filed issue #1952.

S'pht'Kr
  • 2,809
  • 1
  • 24
  • 43

1 Answers1

4

You need to ensure that you're using the EmberJS equivalents so that your bindings work. In your example you've used push, which behaves almost exactly the same as pushObject, but pushObject is KVO compliant (key-value observing/bindings), so Ember can do its thing.

I've updated your JSFiddle to reflect this and it's working again for you: http://jsfiddle.net/RCLd7/8/ but all I've changed is change push to pushObject in two places. If we were to use push then Ember would need to introduce polling, which it doesn't, to discover changes, instead of being notified automatically by pushObject.

Some other examples of native JavaScript methods vs. the Ember equivalents:

  • Native: push, vs. Ember: pushObject
  • Native: pop, vs. Ember: popObject
  • Native: unshift, vs. Ember: unshiftObject
Wildhoney
  • 4,969
  • 33
  • 38
  • Aw crap...Okay: you're right, `pushObject` fixes the problem with my fiddle. But I went back and looked at my code, and I was using pushObject... NOW I'm finding that it's Firefox 10 that doesn't work--your updated fiddle works in IE8 but not FF10 (the length updates correctly but I get no new divs in the DOM). Is FF10 unsupported? [Looks like it should be...](http://stackoverflow.com/questions/9873744/ember-js-browser-support) Should I file a bug? Again, this used to work in pre2. – S'pht'Kr Jan 30 '13 at 07:02
  • Minor update, adding an explicit `.rerender()` call on the ContainerView makes the childViews render properly in FF10, though obviously this isn't supposed to be necessary. I'll update to master tomorrow or so and see if it still exists, if so I'll file a bug. – S'pht'Kr Jan 30 '13 at 08:55
  • That seems awfully weird! Yep, I think I'd file a bug if it still persists after updating from master. – Wildhoney Jan 30 '13 at 09:40
  • 1
    The Ember equivalent of JavaScript's `splice` is [`replace`](http://emberjs.com/api/classes/Ember.MutableArray.html#method_replace) (albeit with a slightly different signature: it takes an array of objects to insert rather than a variable-length param list). For many cases though, [`insertAt`](http://emberjs.com/api/classes/Ember.MutableArray.html#method_insertAt) and [`removeAt`](http://emberjs.com/api/classes/Ember.MutableArray.html#method_removeAt) may be better choices. – Gabriel Grant Nov 11 '13 at 00:06