Ember js链接到动态查询参数

时间:2016-02-11 19:50:59

标签: javascript ember.js link-to query-parameters

我将用例子解释它

{{#link-to item.targetUrl (query-params randomParam=value.id) class="link-wrap"}}abc{{/link-to}}

如果targeturl是abc.xyz 这会给我href =“#/ abc / xyz?randomParam = 2”

如何拥有动态参数??? randomParam不会是相同的,它可能是randomParm1或randamParm2所以我想要如下所示:

{{#each selectedTab.content as |item|}}

      {{#each item.values as |value|}}
      <li {{action 'itemSelect' item.targetUrl item.param }}>{{#link-to item.targetUrl (query-params item.param=value.id) class="link-wrap"}}{{value.desc}}{{/link-to}}</li>
      {{/each}}

  {{/each}}

这里item.param是dyanamic。我不是真的在找工作,因为我从模板中的动作中找到了使用this.transitionTo的解决方案。我正在寻找如何在{{link-to}}帮助器中解决这个问题。

1 个答案:

答案 0 :(得分:1)

您可以将参数作为哈希而不是位置参数传递(这就是您现在正在做的事情)。

所以你要做的事情是:

// template.hbs
{{#link-to params=myParams}}
    Some text
{{/link-to}}


// component.js
{
    myParams: ['your.route.string']
}

现在,如果您有更复杂的路线,包含动态细分或查询参数:

动态细分

如果您有动态细分,您的路由器可能会显示如下:

// router.js
this.route('users', function(){
    this.route('user', {path: '/:username'})
});

然后你会做类似的事情:

// template.hbs
{{#link-to params=myParams}}
    Some text
{{/link-to}}


// component.js
{
    myParams: ['users.user', 'SOME_USERNAME']
}

查询{arams

如果您有查询参数,您的控制器如下所示:

// controller.js
{
    queryParams: ['foo', 'bar']
}

然后你会做类似的事情:

// template.hbs
{{#link-to params=myParams}}
    Some text
{{/link-to}}


// component.js
{
    myParams: ['some.route.string, {
        isQueryParams: true,
        values: {
            foo: 'some_value',
            bar: 'another_value',
        }   
    }]
}

请注意,查询参数对象必须是数组中的最后一个。因此,如果您有一个动态细分,它看起来像

myParams: ['some.route.string', 'someDynamicID', {queryObject}]