Ember.js在转换到不同路由时持久化classNameBindings

Ember.js在转换到不同路由时持久化classNameBindings,ember.js,Ember.js,我对ember是个新手,我已经尝试解决这个问题好几天了,但我似乎在网上找不到解决方案 我有一个页面,上面有所有帖子的列表,每个帖子都有一个标签(比如hashtag),可以是“健身”、“知识”或“社交”。在页面顶部,我有3个视图助手,每个视图助手代表一个标签(健身、知识或社交)。这些将用于筛选出具有特定标记名的帖子 我的问题是,当我单击视图帮助器时,我将“isSelected”属性切换为true,这将通过classNameBindings添加“isSelected”类。但是当我在站点上转换到另一个

我对ember是个新手,我已经尝试解决这个问题好几天了,但我似乎在网上找不到解决方案

我有一个页面,上面有所有帖子的列表,每个帖子都有一个标签(比如hashtag),可以是“健身”、“知识”或“社交”。在页面顶部,我有3个视图助手,每个视图助手代表一个标签(健身、知识或社交)。这些将用于筛选出具有特定标记名的帖子

我的问题是,当我单击视图帮助器时,我将“isSelected”属性切换为true,这将通过classNameBindings添加“isSelected”类。但是当我在站点上转换到另一个路径并返回时,“isSelected”属性被重置为false,“isSelected”类被删除。当我再次访问路线时,如何保持这些值的持久性和灵活性

这是我的密码:

<script type="text/x-handlebars" data-template-name="global">
<ul class="categories">
<li>{{view App.Tag class="label fitness" text="fitness"}}</li>
<li>{{view App.Tag class="label knowledge" text="knowledge"}}</li>
<li>{{view App.Tag class="label social" text="social"}}</li>
</ul>
</script>

我也尝试过使用带有操作的控制器,但这种方式保留了“isSelected”属性,但在我重新访问路由时没有保留类的添加。

这可能不理想,但要保存应用程序的状态,可以将状态放在控制器中。您可能有一个简单的实现,但可能没有将isSelected指定为属性。下面的代码可以工作,您可以查看jsbin


如果你找到一个更好的方法,请张贴!我在自己的应用程序中也做了类似的事情,但由于视图被破坏和重建,所以面临相同的问题。乍一看,这可能是一个可行的解决方案,但正如它所说的,还没有完全实现。您必须手动启用查询参数,但它们可以工作。它们将绑定到控制器上的属性。非常感谢!这对我来说非常有效。我希望这能在将来帮助其他人,因为我以前找不到有人问过或回答过这个问题:)
        "use strict";

 App.Tag = Ember.View.extend({

    tagName: 'span',

    template: Ember.Handlebars.compile('{{view.text}}'),

    classNames: ['label'],

    classNameBindings: ['isSelected'],
    isSelected: false,

    click: function () {
        this.toggleProperty('isSelected');
    }
});
App = Ember.Application.create();

App.Router.map(function() {
  this.route('global');
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.GlobalController = Ember.Controller.extend({
  activeTags: Ember.A()
})

App.Tag = Ember.View.extend({

  tagName: 'span',

  template: Ember.Handlebars.compile('{{view.text}}'),

  classNames: ['label'],

  classNameBindings: ['isSelected'],

  isSelected: function () {
    console.log("ON CHANGE", this.get('controller.activeTags'));
    return this.get('controller.activeTags').contains(this.text);
  }.property('controller.activeTags.@each'),

  click: function () {
   var tagArray = this.get('controller.activeTags');
   if (tagArray.contains(this.text))
     this.set('controller.activeTags', tagArray.without(this.text))
   else
     tagArray.pushObject(this.text);
  }

});