Ember.js 显示元素集合，隐藏活动元素

更新问了这个问题后，我重新设计了我的UI，不再需要这个功能；然而，为了帮助那些最终也会遇到类似问题的人，我将这个问题保持开放和积极

我列出了一个模板中的元素集合，每个元素都有一个链接，可以在列表的右侧打开它。单击一个元素时，我只想隐藏该元素，并在单击另一个元素时再次显示它。我目前的做法是在模型上将属性（active）设置为true。这感觉有三个原因是错误的：

这个属性实际上不是模型模式的一部分，它只是任意的；这让它看起来像是一个控制器的问题（参见下文了解为什么它不起作用）

我必须首先在所有型号上将active设置为false，迫使我更改另一个路由器的型号，这可能是好的，也可能是坏的，我不确定

在最近的PeepCode屏幕广播中，他展示了如何使用

@each.{attribute}

绑定到数组中的属性；这让我觉得我必须做一些类似的事情（比如

this.set（“@each.active”，false）

）来一次性设置它们

我想在控制器上使用一个方法，但似乎无法将参数传递到Handlebar if语句中的函数中

下面是我用来呈现列表的代码：

  {{#each note in controller}}
    {{!v-- I was trying to do {{#if isCurrentNote note}} but that seems to be invalid handlebars}}
    {{#unless note.active}}
      <li class="sticky-list-item">
        {{view Ember.TextArea classNames="sticky-note" valueBinding="note.content"}}
        {{#linkTo note note classNames="sticky-permalink"}}
          ∞
        {{/linkTo}}
      </li>
    {{/unless}}
  {{/each}}

就像我说的，我所拥有的一切都是有效的，但感觉是错的。有谁能证实我的怀疑或帮我放松一下

---

谢谢

对我来说，这看起来像是应该由

NotesView

和存储注释选择的

NotesController

来完成的事情

这是小提琴：

NotesController

将保存所有注释和所选注释的记录：

App.NotesController = Ember.ArrayController.extend({
  content: [],
  selectedNote: null,
  selectNote: function(id){
     var note = this.get('content').findProperty('id', id);
     this.set('selectedNote', note);
  }
});

使用

NotesView

观察该选择并相应地显示/隐藏列表的元素

App.NotesView = Ember.View.extend({
  templateName:  'notes',
  refresh: function(){
    var view = this.$(),
        selection = this.get('controller.selectedNote');
    if (view) {
        view.find('li').show();
        if (selection) view.find('li.note_'+selection.id).hide();
    }
  }.observes('controller.selectedNote')
});

这是

注释

对象及其2个模板（在列表中或完整显示时）。ListView处理

单击

事件，并将

id

传递给

注释控制器

App.Note = Ember.Object.extend({
  name: '',
  content: ''
});

App.NoteView = Ember.View.extend({
    templateName: 'note'
});

App.NoteListItemView = Ember.View.extend({
    tagName: 'li',
    templateName: 'noteListItem',
    classNameBindings: ['noteID'],
    noteID: function(){
        return 'note_' + this._context.id;
    }.property(),
    click: function(e){
        this.get('controller').selectNote(this._context.id);
    }
});

在

NotesView

模板中，所有内容都会显示出来，如果有

selectedNote

，我们会再次完整地显示

Note

：

{{#each note in controller}}
  {{#with note}}
    {{view App.NoteListItemView}}
  {{/with}}
{{/each}}

{{#if selectedNote}}
  {{#with selectedNote}}
    {{view App.NoteView}}
  {{/with}}
{{/if}}

路由

以将其组合在一起

App.Router.map(function() {
  this.resource('notes', { path: "/notes" });
});

App.IndexRoute = Ember.Route.extend({ 
  enter: function() {
    this.transitionTo('notes');
  }
});
App.NotesRoute = Ember.Route.extend({
  model: function() {
    return [
        App.Note.create({id: 1, name: 'Milk', content: '15% fresh milk'}),
        App.Note.create({id: 2, name: 'Juice', content: 'Orange with pulp'}),
        App.Note.create({id: 3, name: 'Cereals', content: 'Kelloggs Froot Loops'}),
    ];
  },
  setupController: function(controller, model) {
      controller.set('content', model);
  },
  renderTemplate: function(controller, model) {
    this.render('notes', { outlet: 'content' });
  }
});

---

通过查看API文档，我刚刚在

Ember.Array

上找到了

setEach

。这有助于平息对#3的担忧，但#1仍然困扰着我。我喜欢这样做，即在模型上设置任意属性。此解决方案的一个问题是，我丢失了到/notes/：note_id的路径。显示所选便笺的全部目的是使我可以永久对齐它，并在以后轻松找到它。我认为您的解决方案可以进行调整，以保持路线，唉，因为提出这个问题，我已经重新设计了这样一种方式，我不再需要这种复杂性。谢谢你的帮助！我想如果您有/notes/：note\u id这样的路由，您可以在对URL进行反序列化时在控制器上设置

selectedNote

属性，这样您就可以保留

链接到

帮助器了？

App.Router.map(function() {
  this.resource('notes', { path: "/notes" });
});

App.IndexRoute = Ember.Route.extend({ 
  enter: function() {
    this.transitionTo('notes');
  }
});
App.NotesRoute = Ember.Route.extend({
  model: function() {
    return [
        App.Note.create({id: 1, name: 'Milk', content: '15% fresh milk'}),
        App.Note.create({id: 2, name: 'Juice', content: 'Orange with pulp'}),
        App.Note.create({id: 3, name: 'Cereals', content: 'Kelloggs Froot Loops'}),
    ];
  },
  setupController: function(controller, model) {
      controller.set('content', model);
  },
  renderTemplate: function(controller, model) {
    this.render('notes', { outlet: 'content' });
  }
});