Ember.js中的仪表板样式快速编辑

我正在尝试使用Ember为我的Rails应用程序创建一个管理后端

这里有一个JsBin说明了我遇到的问题

简而言之，我希望当用户单击任意模型时，能够在其他模型列表中编辑该模型的标题

评论中有问题的相关咖啡脚本：

App.ItemView = Ember.View.extend
  templateName: "item"
  isEditing: false

  didInsertElement: ->

    # 1. Is there a better way to toggle the isEditing property when the title is clicked?
    view = @ 
    @$('.title').click ->
      view.toggleProperty('isEditing')

    # 2. How would I unset isEditing when the user clicks on a different App.ItemView? 

# 3. How do I set App.ItemController to be the controller for App.ItemView?
App.ItemController = Ember.Controller.extend

  # 4. How would I then toggle the isEditing property of App.ItemView on either save of cancel from App.ItemController?
  actions:
    save: ->
      # set isEditing is false on App.ItemView
      @get('model').save()
    cancel: ->
      # set isEditing is false on App.ItemView
      @get('model').rollback()

如果您对这些问题有任何帮助，我们将不胜感激。

在以下条件下切换表单项目的状态，单击“保存”按钮、单击“取消”按钮，然后单击另一个项目

每次单击项目时，我都会将项目视图引用保存到索引控制器。单击其他项目时，我使用a

beforeObserver

将上一个项目视图状态设置为false

我还在模板中指定了项控制器

App.IndexController = Em.ObjectController.extend({
  currentEditingItem: null,

  currentEditingItemWillChange: function() {
    if(this.get('currentEditingItem')) {
      this.set('currentEditingItem.isEditing', false);
    }
  }.observesBefore('currentEditingItem'),
});

App.ItemController = Ember.Controller.extend({
  needs: ['index'],

  formController: Em.computed.alias('controllers.index'),

  currentEditingItem: Em.computed.alias('formController.currentEditingItem'),

  actions: {
    save: function() {
      this.set('currentEditingItem.isEditing', false);
      return this.get('model').save();
    },
    cancel: function() {
      this.set('currentEditingItem.isEditing', false);
      return this.get('model').rollback();
    }
  }
});

---

好的，让我们看看我是否记得回答所有的问题

首先，我们决定将整个项目集包装在一个数组控制器中（这允许我们跟踪所有子项目控制器）。它还允许我们定义项目可以使用的itemController。 第三，由于我们迭代了控制器，它将使用这个修改过的项控制器 这是我们的模板

{{{#if controller.isEditing}
{{input value=controller.title}
取消
拯救
{{else}
{{controller.title}}
{{/if}
{{{#if controller.isSaving}
保存。。。
{{/if}

---

示例：

kingpin2k和blessenm的答案都非常好。我决定使用kingpin2k，因为它更容易阅读，尽管有点冗长。

  <script type="text/x-handlebars" data-template-name="item-list">
    <h3>{{view.title}}</h3>
    <ul>
      {{render 'items' view.content}}
    </ul>
  </script>


App.ItemsController = Em.ArrayController.extend({
  itemController:'item',
  resetChildren: function(){
    this.forEach(function(item){
      item.set('isEditing', false);
    });
  }
});

  <script type="text/x-handlebars" data-template-name="items">

      {{#each item in controller}}
        <li>{{view App.ItemView content=item}}</li>
      {{/each}}

  </script>

App.ItemController = Ember.ObjectController.extend({
  isEditing: false,
  isSaving: false,
  actions: {
    startEditing: function(){
      this.parentController.resetChildren();
      this.set('isEditing', true);
    },
    save: function() {
      var self = this;
      this.set('isEditing', false);
      this.set('isSaving', true);
      this.get('model').save().finally(function(){
        //pretend like this took time...
        Em.run.later(function(){
          self.set('isSaving', false);
        }, 1000);
      });
    },
    cancel: function() {
      this.set('isEditing', false);
      this.get('model').rollback();
    }
  }
});

  <script type="text/x-handlebars" data-template-name="item">
    {{#if controller.isEditing}}
      {{input value=controller.title }}
      <button {{ action 'cancel' }}>Cancel</button>
      <button {{ action 'save' }}>Save</button>
    {{else}}
      <div  {{action 'startEditing'}}>
       <div class="title">{{controller.title}}</div>
      </div>
    {{/if}}
    {{#if controller.isSaving}}
      Saving...
    {{/if}}
  </script>