Question

在indexview中，我有链接设置排序：

# Template
{{#link-to 'products' (query-params sortBy="title")}}Title{{/link-to}}
{{#link-to 'products' (query-params sortBy="price")}}Price{{/link-to}}

# Controller
queryParams: ['sortBy']
sortBy: 'id'
sortProperties: ( ->
  [@get("sortBy")]
).property("sortBy")

生成的链接始终具有“活动”类，但我想突出显示当前活动的排序过滤器。最好的方法是什么？

我尝试绑定到这样的计算属性：

{{#link-to 'products' (query-params sortBy="price") classNameBindings='sortByPrice'}}Price{{/link-to}}

sortByPrice: -> (
  @get('sortBy') == 'price'
).property('sortBy')

这不太有用，但即使它确实如此，那根本就不是DRY - 最终我想添加许多不同的属性来进行排序。

据我所知，问题在于ember在该控制器的上下文中添加了“active”类，它始终具有不同的query-params。

（截至6月14日运行最新的Ember canary版本）

Answer 1

QueryParams应该添加＆＃34; active＆＃34; class，基于{{#link-to}}帮助器中声明的参数是否与当时属性具有相同的值，我可以在this jsbin中进行演示。

那就是说，我遇到了同样的问题，所以我相信还有一些不合适的情况，如果你能修改这个问题，我会感到高兴。反映这一点的例子。

Answer 2

我现在面临同样的问题而且我有临时解决方案。

 <!-- Posts Template -->
        <!-- Categories -->
        <div class="block step visible-desktop visible-tablet">
            <div class="header">
                <h3>Category</h3>
            </div>

            <div class="area categories">
                <ul>
                    {{#each staticCategory in controller.staticCategories}}
                        {{post-category currentCategory=currentCategory staticCategory=staticCategory}}
                    {{/each}}
                </ul>
            </div>
        </div>
        <!-- Categories end -->


   //Posts Controller
   staticCategories: ['Front-End', 'JavaScript', 'jQuery', 'null'],
     currentCategory: function () {
         return this.get('category');
     }.property('category'),
     queryParams: ['category'],
     category: null,
     filteredContent: function () {
         var category = this.get('category');
         var posts = this.get('model');
         return category ? posts.filterBy('category', category) : posts;
     }.property('category', 'model')

    //Post-Category Component template
    {{#link-to 'posts' (query-params category=staticCategory)}}
      {{staticCategory}}
    {{/link-to}}

    //Post-Category Component js
    Blog.PostCategoryComponent = Ember.Component.extend({
       tagName: 'li',
       isActive: function () {
         return this.get('staticCategory') === this.get('currentCategory')
        }.property('currentCategory', 'staticCategory'),
        classNameBindings: ['isActive:active']
    });

Answer 3

我找到了解决方案。 Ember（当前）似乎区分链接到资源和链接到子路径，例如，执行{{link-to "resource"}}将始终设置活动类，但执行{{link-to "resource.index"}}将切换活动状态根据他们的查询参数。

这是一个展示差异的jsbin：http://emberjs.jsbin.com/zawukucisoni/3/edit

我已经打开了一个问题，可以在这里找到：https://github.com/emberjs/ember.js/issues/5359

Answer 4

自https://github.com/emberjs/ember.js/pull/5109

起，已在Ember Canary中修复此问题

Ember.js与查询参数的活动链接类

4 个答案: