1.13+ Support #4

Closed
rwjblue opened this Issue May 27, 2015 · 13 comments

Comments

Projects
None yet
10 participants
@rwjblue

rwjblue commented May 27, 2015

In 1.13.0-beta.1 and above, the childViews array is not maintained (HTMLBars maintains a tree structure instead of a flat array listing).

I spiked getting things working for both pre-1.13 and post in this JSBin, snippet below:

  didRender: function() { 
    function filterAttrMorphs(node) {
      return node.constructor.name !== 'AttrMorph';
    }
    var childViews = this._renderNode.childNodes.filter(filterAttrMorphs)[0].childNodes
    .map(function(node) {
      return node.emberView;
    });

    this.set('childViews', Ember.A(childViews));
  }

I am not super happy with the requirement to use the private _renderNodes, and will be trying to get something working in core for later betas, but figured folks might want to use this addon against 1.13+ in the interim.

I'll try to do an actual PR later and add testing for cross Ember versions.

@raytiley

This comment has been minimized.

Show comment
Hide comment

👍

@lstyles

This comment has been minimized.

Show comment
Hide comment
@lstyles

lstyles May 28, 2015

The JSBin linked doesn't work for me in IE 11.

I get this error:

TypeError: Unable to get property 'map' of undefined or null reference
   at didRender (http://emberjs.jsbin.com/rwjblue/553:78:5)
   at trigger (http://builds.emberjs.com/canary/ember.debug.js:41111:9)
   at superWrapper (http://builds.emberjs.com/canary/ember.debug.js:19570:9)
   at Renderer.prototype.didRender (http://builds.emberjs.com/canary/ember.debug.js:11003:7)
   at Renderer_dispatchLifecycleHooks (http://builds.emberjs.com/canary/ember.debug.js:10916:7)
   at Renderer_renderTopLevelView (http://builds.emberjs.com/canary/ember.debug.js:10882:7)
   at Queue.prototype.invokeWithOnError (http://builds.emberjs.com/canary/ember.debug.js:885:13)
   at Queue.prototype.flush (http://builds.emberjs.com/canary/ember.debug.js:943:13)
   at DeferredActionQueues.prototype.flush (http://builds.emberjs.com/canary/ember.debug.js:748:13)
   at Backburner.prototype.end (http://builds.emberjs.com/canary/ember.debug.js:173:11)

lstyles commented May 28, 2015

The JSBin linked doesn't work for me in IE 11.

I get this error:

TypeError: Unable to get property 'map' of undefined or null reference
   at didRender (http://emberjs.jsbin.com/rwjblue/553:78:5)
   at trigger (http://builds.emberjs.com/canary/ember.debug.js:41111:9)
   at superWrapper (http://builds.emberjs.com/canary/ember.debug.js:19570:9)
   at Renderer.prototype.didRender (http://builds.emberjs.com/canary/ember.debug.js:11003:7)
   at Renderer_dispatchLifecycleHooks (http://builds.emberjs.com/canary/ember.debug.js:10916:7)
   at Renderer_renderTopLevelView (http://builds.emberjs.com/canary/ember.debug.js:10882:7)
   at Queue.prototype.invokeWithOnError (http://builds.emberjs.com/canary/ember.debug.js:885:13)
   at Queue.prototype.flush (http://builds.emberjs.com/canary/ember.debug.js:943:13)
   at DeferredActionQueues.prototype.flush (http://builds.emberjs.com/canary/ember.debug.js:748:13)
   at Backburner.prototype.end (http://builds.emberjs.com/canary/ember.debug.js:173:11)
@raytiley

This comment has been minimized.

Show comment
Hide comment
@raytiley

raytiley Jun 10, 2015

Just a note for anyone trying to manually patch this. You can't rely on the name of AttrMorph in production builds. I changed the code as follows:

function filterAttrMorphs(node) {
  return node.attrName === undefined;
}

This seems to work with production builds. I know @rwjblue is planning on adding a brand to AttrMorph so it can be detected more cleanly.

Just a note for anyone trying to manually patch this. You can't rely on the name of AttrMorph in production builds. I changed the code as follows:

function filterAttrMorphs(node) {
  return node.attrName === undefined;
}

This seems to work with production builds. I know @rwjblue is planning on adding a brand to AttrMorph so it can be detected more cleanly.

@justinko

This comment has been minimized.

Show comment
Hide comment
@justinko

justinko Jun 17, 2015

Had to use this variation with 1.13.0:

  didRender: function() {
    function filterAttrMorphs(node) {
      return node.attrName === undefined;
    }
    var childViews = this._renderNode.childNodes.filter(filterAttrMorphs)[0].childNodes.map(function(node) {
      return node.childNodes[0].emberView;
    });
    this.set('childViews', Ember.A(childViews));
  }

Had to use this variation with 1.13.0:

  didRender: function() {
    function filterAttrMorphs(node) {
      return node.attrName === undefined;
    }
    var childViews = this._renderNode.childNodes.filter(filterAttrMorphs)[0].childNodes.map(function(node) {
      return node.childNodes[0].emberView;
    });
    this.set('childViews', Ember.A(childViews));
  }
@alexlafroscia

This comment has been minimized.

Show comment
Hide comment
@alexlafroscia

alexlafroscia Jun 18, 2015

Seems to have changed in 1.13.2, @justinko's solution doesn't seem to work for me.

Seems to have changed in 1.13.2, @justinko's solution doesn't seem to work for me.

@Panman8201

This comment has been minimized.

Show comment
Hide comment
@Panman8201

Panman8201 Jul 16, 2015

Contributor

Ug, I can't get this to work either. Except I was getting junk in the second set of childNodes that don't have an emberView, which causes a "Cannot call get with 'active' on an undefined object." error. Had to make a filter to get rid of those, but it still doesn't work right. Any updates / ideas on this @rwjblue or @raytiley ? I'm on ember 1.13.4 using ember-cli 1.13.1. Here is my didRender hook:

didRender: function() {
    function filterAttrMorphs(node) {
        return node.attrName === undefined;
    }
    function filterNullEmberViews(node) {
        return !!node.emberView;
    }
    function mapEmberViews(node) {
        return node.emberView;
    }
    var childViews = this._renderNode.childNodes.filter(filterAttrMorphs)[0].childNodes.filter(filterNullEmberViews).map(mapEmberViews);
    this.set('childViews', Ember.A(childViews));
}
Contributor

Panman8201 commented Jul 16, 2015

Ug, I can't get this to work either. Except I was getting junk in the second set of childNodes that don't have an emberView, which causes a "Cannot call get with 'active' on an undefined object." error. Had to make a filter to get rid of those, but it still doesn't work right. Any updates / ideas on this @rwjblue or @raytiley ? I'm on ember 1.13.4 using ember-cli 1.13.1. Here is my didRender hook:

didRender: function() {
    function filterAttrMorphs(node) {
        return node.attrName === undefined;
    }
    function filterNullEmberViews(node) {
        return !!node.emberView;
    }
    function mapEmberViews(node) {
        return node.emberView;
    }
    var childViews = this._renderNode.childNodes.filter(filterAttrMorphs)[0].childNodes.filter(filterNullEmberViews).map(mapEmberViews);
    this.set('childViews', Ember.A(childViews));
}
@miguelcobain

This comment has been minimized.

Show comment
Hide comment
@miguelcobain

miguelcobain Jul 28, 2015

I'd like to add another alternative:

{{#link-to "dashboard" tagName="li" href=false}}
  {{#link-to "dashboard" bubbles=false}}
    Dashboard
  {{/link-to}}
{{/link-to}}

I'd like to add another alternative:

{{#link-to "dashboard" tagName="li" href=false}}
  {{#link-to "dashboard" bubbles=false}}
    Dashboard
  {{/link-to}}
{{/link-to}}
@Panman8201

This comment has been minimized.

Show comment
Hide comment
@Panman8201

Panman8201 Jul 28, 2015

Contributor

@miguelcobain I don't think that'll work if it's a drop-down component where there may be multiple {{link-to}}s going to different paths. Also, the root container (this component) should not trigger a transition event. My specific use case here is for bootstraps navbar and dropdowns.

Contributor

Panman8201 commented Jul 28, 2015

@miguelcobain I don't think that'll work if it's a drop-down component where there may be multiple {{link-to}}s going to different paths. Also, the root container (this component) should not trigger a transition event. My specific use case here is for bootstraps navbar and dropdowns.

@miguelcobain

This comment has been minimized.

Show comment
Hide comment
@miguelcobain

miguelcobain Jul 28, 2015

That works for whenever you need an <li> with an active class when the given route is active. I'm also using bootstrap. I don't know why it wouldn't work with navbars. I'm using them with this. :/

That works for whenever you need an <li> with an active class when the given route is active. I'm also using bootstrap. I don't know why it wouldn't work with navbars. I'm using them with this. :/

@elidupuis

This comment has been minimized.

Show comment
Hide comment
@elidupuis

elidupuis Aug 20, 2015

Any movement here? I just came across this issue in our app...

Any movement here? I just came across this issue in our app...

@maartenparmentier

This comment has been minimized.

Show comment
Hide comment
@maartenparmentier

maartenparmentier Aug 25, 2015

I also would love to hear the progression..

I also would love to hear the progression..

@alexspeller

This comment has been minimized.

Show comment
Hide comment
@alexspeller

alexspeller Sep 9, 2015

Owner

@rwjblue I have taken a more… brute force approach in 0.0.4 - it seems to work though.

Owner

alexspeller commented Sep 9, 2015

@rwjblue I have taken a more… brute force approach in 0.0.4 - it seems to work though.

@alexspeller alexspeller closed this Sep 9, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment