Cannot pass hash helper to link-to (EmptyObject lacking hasOwnProperty)

Sometimes a route can resolve with multiple records like so:

model() {
  const profile = ...;
  const user = ...;

  return RSVP.hash({
    profile,
    user,
  });
},

So then you’d think you could use link-to like so:

{{link-to 'My Profile' 'profiles.show' (hash user=user profile=profile)}}

This doesn’t work because the hash helper returns EmptyObject and extractQueryParams tries to call .hasOwnProperty() on it, resulting in an error.

There’s a workaround to this which involves using an action with transitionTo but it feels like a poor experience.

This is an issue I’ve had with Ember for years. What’s the correct way to pass multiple records to link-to if not this?

I’m using ember-cli 3.0.2.

---

Edit: I’ve started using the following helper in place of hash as a workaround:

import { helper } from '@ember/component/helper';

export function plainObject(params, hash) {
  const object = {};
  // NOTE: `hash` is an `EmptyObject` so we convert to a POJO so that it can be
  // used with `link-to`.
  Object.keys(hash).forEach(k => object[k] = hash[k]);
  return object;
}

export default helper(plainObject);

[btecu]

Define standard… It works right now but it’s been decided that in general it’s not a good pattern and in the future it might be no longer supported.

There was at least one RFC related to this, maybe more: https://github.com/emberjs/rfcs/pull/283

@mhluska Are you able to create a test replicating the issue?

[rwjblue]

@mhluska - I’m actually unable to reproduce the original issue, I wrote a test that should have failed but didn’t:

    ['@test [GH#17018] using `hash` helper for model']() {
      this.addTemplate('index', `{{link-to 'Post' 'post' (hash id="bar")}}`);
      this.addTemplate('post', 'Post: {{model.id}}');

      this.router.map(function() {
        this.route('post', { path: '/posts/:post_id' });
      });

      return this.visit('/')
        .then(() => {
          this.assertComponentElement(this.firstChild, {
            tagName: 'a',
            attrs: { href: '/posts/bar' },
            content: 'Post',
          });

          return this.click('a');
        })
        .then(() => {
          this.assertText('Post: bar');
        });
    }