Dynamic className that changes when it's property does about dynamic-link

[asross]

Hmm, can you give an example in code? If there is an update to the component's params.className or className to "some-class-name active" instead of just "some-class-name", it should update the link's HTML.

If not, it's possible there's an issue in how I'm overriding className though, or that I'm somehow making it impossible to pass additional class names. If you can provide just a few more details then I should be able to replicate the issue in a test and implement a fix.

[jrdn91]

This is how I tried it className: this.get('filteringLosing') ? "filter-losing active" : "filter-losing"

[asross]

This is how I tried it className: this.get('filteringLosing') ? "filter-losing active" : "filter-losing"

Can you give more context? That doesn't look like a computed property to me, and also where are you putting that logic? Is it in a controller or component whose template invokes dynamic-link?

[jrdn91]

In the route I am setting an array of navigation items like so

this.get('navigation').set('actionBarItems',[
    Ember.Object.create({
        linkParams:  {
            action: "losingItems",
            className: this.get('filteringLosing') ? "filter-losing active" : "filter-losing"
        },
        icon: "noun_245219_cc"
      }),
    Ember.Object.create({
       linkParams:  {
            action: "winningItems",
            className: "filter-winning"
        },
        icon: "trophy"
    }),
    Ember.Object.create({
        linkParams:  {
            action: "watchingItems",
            className: "filter-watching"
        },
        icon: "noun_197397_cc"
    })
]);

I also have a property filteringLosing: false, in an action I toggle this property so that it's now true

this.toggleProperty('filteringLosing');

Where my navigation is I call dynamic-link like

{{#dynamic-link params=linkParams}}
    ...
{{/dynamic-link}}

[asross]

Ah, well it looks like the problem is that actionBarItems isn't a computed property, so it won't update when filteringLosing changes.

One option is to restructure your code so that your navigation takes a computed property, which would depend on filteringLosing, e.g.:

actionBarItems: Ember.computed('filteringLosing', function() {
  return [{
      linkParams:  {
          action: "losingItems",
          className: this.get('filteringLosing') ? "filter-losing active" : "filter-losing"
      },
      icon: "noun_245219_cc"
  }, {
       // rest of your action bar items
  }];
})

But I don't know how the rest of your code is structured, so I can't say exactly how you would do this.

Another option is to update navigation.actionBarItems using an observer whenever filteringLosing changes, which might look like:

updateNavigation: Ember.on('init', Ember.observer('filteringLosing', function() {
  this.get('navigation').set('actionBarItems',[
      Ember.Object.create({
          linkParams:  {
              action: "losingItems",
              className: this.get('filteringLosing') ? "filter-losing active" : "filter-losing"
          },
          icon: "noun_245219_cc"
        }),
      Ember.Object.create({
         linkParams:  {
              action: "winningItems",
              className: "filter-winning"
          },
          icon: "trophy"
      }),
      Ember.Object.create({
          linkParams:  {
              action: "watchingItems",
              className: "filter-watching"
          },
          icon: "noun_197397_cc"
      })
  ]);
}))

That function will re-trigger every time filteringLosing changes, so the link should hopefully update too.

[jrdn91]

I'm also noticing when a property changes and I have the model set to the value of that property the links are not being updated on page to point to the new link with the updated model based on the property that changed.

Basically in the same vein as this above class issue as it seems when that property changes it doesn't update the class, this is happening also in the model definition.

[asross]

I'm also noticing when a property changes and I have the model set to the value of that property the links are not being updated on page to point to the new link with the updated model based on the property that changed.

Basically in the same vein as this above class issue as it seems when that property changes it doesn't update the class, this is happening also in the model definition.

Again, from what you've showed me so far this doesn't seem to be an issue with dynamic-link; instead it looks like you're setting actionBarItems without any data bindings, so none of the updates ever propagate to navigation, much less any links it renders.

[asross]

If it's helpful, the pattern I used to get this type of behavior (where you have a bar of links that's present on multiple routes but should be different for each) is to have a named outlet in my application template for the action bar:

{{! application.hbs }}

{{ outlet "action-bar" }}

Then a partial with my action bar:

{{! -action-bar.hbs }}

{{#if actionBarItems}}
  <ul class='action-bar'>
     {{#each actionBarItems as |actionBarItem|}} 
        <li class='action-bar-item'>
          {{#dynamic-link params=actionBarItem.linkParams}}
             {{actionBarItem.linkText}}
          {{/dynamic-link}}
        </li>
     {{/each}}
  </ul>
{{/if}}

And then I have a mixin I include in some routes which renders an action bar template:

// app/mixins/action-bar-route.js
export default Ember.Mixin.extend({
  renderTemplate: function(controller, model) {
     this.render('action-bar', { into: 'application', outlet: 'action-bar' });
     this._super(controller, model);
  }
});

// app/routes/some-resource.js
import ActionBarRouteMixin from '../mixins/action-bar-route';
export default Ember.Route.extend(ActionBarRouteMixin, {
  // some code
});

At that point, for a route where I want the action bar, I just include the mixin and define actionBarItems as a computed property on its controller:

// app/controllers/some-resource.js
export default Ember.Controller.extend({
  actionBarItems: Ember.computed('model.name', 'filteringLosing', function() {
    return [
      // some list of items that depend on some of my properties
    ];
  });
});

That pattern has worked pretty well for me with dynamic-link.

[asross]

Going to close this now since it seems like it's not a problem with dynamic-link.