0

更新自从提出这个问题以来，我重新设计了我的 UI，这样我就不再需要这个功能了；但是，为了帮助遇到类似问题的其他人，我将保持开放和积极的态度。

我在模板中列出了一组元素，每个元素都有一个链接，可以在列表右侧打开它。单击一个时，我只想隐藏该元素并在单击另一个时再次显示它。我目前执行此操作的方法是在模型上将属性（活动）设置为 true。这感觉不对，原因有以下三个：

  1. 这个属性实际上不是模型模式的一部分，它只是任意的；这使它看起来像是一个控制器问题（请参阅下文了解为什么这不起作用）
  2. 我必须首先在所有型号上将 active 设置为 false，迫使我更改另一个路由器的型号，这可能是好是坏，我不确定
  3. 在最近的 PeepCode 截屏视频中，他展示了使用@each.{attribute}绑定到数组中的属性；这让我觉得必须有类似的事情我可以做（比如this.set("@each.active", false)）一举将它们全部设置好

我想在控制器上使用一个方法，但似乎我不能将参数传递给 Handlebars 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}}

以下是路线：

App.NotesController = Ember.ArrayController.extend({
  // v-- this is what I was trying to do, but couldn't pass note in the template
  isCurrentNote: function(note){ 
    return this.get("currentNote") == note;
  }.property("currentNote")
});

App.NoteRoute = Ember.Route.extend({
  setupController: function(controller,model){
    this.modelFor("notes").forEach(function(note){
      note.set("active", false);
    });
    model.set("active", true);
  }
});

就像我说的，我有什么工作，但感觉不对。谁能证实我的怀疑或帮助我放松一下？

谢谢！

4

1 回答 1

2

对我来说，这看起来应该主要由NotesView存储NotesControllerNote选择的

这是小提琴：http: //jsfiddle.net/colymba/UMkUL/6/

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

这是Note对象，它是 2 个模板（在列表中或完整显示时）。ListView处理事件click并将 传递id给NotesController.

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

把Routes它放在一起

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' });
  }
});
于 2013-01-27T10:20:48.113 回答