Ember.js持久化classNameBindings在过渡到不同的路由

Question

我是很新的成员，我已经尝试了几天来解决这个问题，但我似乎找不到一个解决方案的任何在线。

我有一个包含所有帖子列表的页面，每个帖子都有一个标签(就像一个标签)，要么是“健身”，要么是“知识”或“社交”。在页面的顶部，我有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>

查看：

        "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');
    }
});

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

Answer 1

这可能并不理想，但是要保存应用程序的状态，可以将状态放在控制器中。您可能有一个简单的实现，但可能没有将isSelected指定为属性。以下操作正常，您可以查看jsbin 这里。

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);
  }

});