access related field property in `labelProperty`

[dbinetti]

I'm trying to show the property of a related object as the labelProperty using a computed property on the model used for the multiselect, but it doesn't work. I can see the proper CP on the target model, but it doesn't render in the checkbox list. Any thoughts?

[RSSchermer]

It's difficult to tell whats going wrong here without an example.

What might be going wrong is that you are building a separate array of label strings and then pointing the labelProperty to that array?

The labelProperty should be set to the name of the property on an option object that you want to use as the label. For example:

{{multiselect-checkboxes options=contests selection=selectedContests labelProperty='name'}}

In this case, for each contest option, the name property will be looked up and used as the label.

[dbinetti]

I'm way too terse; apologies.

Consider these four models:

// Person
export default Model.extend({
  name: attr('string'),
  contestants: hasMany('contestant', {async: true}),
});

// Award
export default Model.extend({
  name: attr('string'),
  contests: hasMany('contest', {async: true}),
});

// Contest
export default Model.extend({
  name: attr('string'),
  award: belongsTo('award', {async: true}),
  contestants: hasMany('contestant', {async: true}),

  awardName: computed(function() {
    'award.name',
    return this.get('award.name');
  }),
});

// Contestant
export default Model.extend({
  name: attr('string'),
  contest: belongsTo('contest', {async: true}),
  person: belongsTo('person', {async: true}),
});

Then, given this multiselect:

    {{multiselect-checkboxes
      options=contestOptions
      labelProperty='name'
      selection=selectedContests
      updateSelectionValue=true
      onchange=(action "updateSelection")
    }}

This multiselect is on a template backed by a Person model. The contestOptions for that multiselect represents an array of Contests selected by some set of criteria. The selectedContests represents the Contestant objects related to the the Person. The updateSelection action adds and removes Contestant objects accordingly.

Under this schema, I am seeking to have the labelProperty render the name of the Award, not the Contest. So, in dot-notation, I'm looking to have the label be 'award.name' (which obviously doesn't work.). As a workaround I tried to refer to awardName as a computed property on the Contest model, but that didn't work either (which was odd -- seems like the right solution.). So that's what I'm trying to accomplish.

Thanks!

[RSSchermer]

Could you try:

awardName: computed.alias('award.name')

[dbinetti]

Done.

Result in browser:

[image: Inline image 1]

awardName in controller:

[image: Inline image 2]

On Sat, Apr 1, 2017 at 6:13 AM, Roland [email protected] wrote:

Could you try:

awardName: computed.alias('award.name')

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RSSchermer/ember-multiselect-checkboxes/issues/49#issuecomment-290919303, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJ3utp2_-UybIp9lzVKvF_i0BslDf9Xks5rrk1ggaJpZM4MwW7j .

[RSSchermer]

Unfortunately I don't think your inline images made it through Github's mail forwarder.

[dbinetti]

oops!

result:

awardName:

[dbinetti]

So while poking around trying to solve #47, I noticed this interesting behavior that might indicate where lies the issue:

When using the awardName computed alias above, if I force refresh the page I get:

Then, if I click on any of the other (unnamed) items I immediately get this:

while doing nothing else. Checking any box for any item fills out every item with the proper label. So the question becomes, "why doesn't the list populate the alias on page load for unchecked items?"

[RSSchermer]

I think the problem is that the label property is a promise and so at the initial render it is still empty. The checkboxes need to rerender once this promise resolves. I don't have a good idea on how to accomplish that yet, but I think it is something that the multiselect-checkboxes component should be able to take care of.

[dbinetti]

Very well. I'll keep this open until then.

[RSSchermer]

I may have a fix. It's on a separate branch for now. Could you try replacing your current ember-multiselect-checkboxes dependency in your package.json with:

"ember-multiselect-checkboxes": "git://github.com/RSSchermer/ember-multiselect-checkboxes.git#promise-labels"

And see if that resolves the issue for you?

[dbinetti]

well, in trying to reproduce with the old library I can't! some "anti-regression" somewhere else must have fixed it.

not sure if I should close this, or use branch, or what, but I can no longer reproduce the problem. call it solved?

[RSSchermer]

Let's call it solved then for now. I'll leave the fix on a separate branch for the time being. If this problem pops up again for you or someone else I'll look into it again and see about merging it.

[dbinetti]

So I was able to replicate this -- I've had a need to copy essentially the same functionality, and this time I can reliably reproduce this issue. I've tried the branch you put up but that didn't solve it.

In all other ways this is exactly what I described above. Please let me know how I can help debug it.

[dbinetti]

hm. it's not giving me the option to re-open. @RSSchermer should i start a new issue?

[RSSchermer]

dbinetti commented 4 hours ago hm. it's not giving me the option to re-open. @RSSchermer should i start a new issue?

No, I'll reopen, don't know why it wont allow you to do so yourself.

It's quite unfortunate that the promise-labels branch does not seem to solve it, that was my best and only guess at what was going wrong. It would appear then that the issue is not just the label properties being promises.

Do I understand correctly that you essentially do the same thing in two different places and in one place it works and in the other it doesn't? It would probably help then if we could identify the difference between these 2 places that causes this. Unfortunately I don't really have a better idea at the moment.

[RSSchermer]

This is probably not what's going wrong but on the off chance: you are sure you were actually using the promise-labels branch and didn't forget to e.g. run npm install after updating your package.json?

[dbinetti]

i'm so sorry i'm late in responding. i've moved to yarn, but yes i do think i forced the new package and it didn't work i can try again. if the records are in the store it renders, which you probably already knew but FWIW

On Tue, May 16, 2017 at 12:46 AM, Roland [email protected] wrote:

This is probably not what's going wrong but on the off chance: you are sure you were actually using the promise-labels branch and didn't forget to e.g. run npm install after updating your package.json?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RSSchermer/ember-multiselect-checkboxes/issues/49#issuecomment-301702920, or mute the thread https://github.com/notifications/unsubscribe-auth/AAJ3uqkPg7qV-u411WN4QIPoNxfxiquPks5r6VRvgaJpZM4MwW7j .