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

Question

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

这是一个说明我遇到的问题的 JsBin。

http://emberjs.jsbin.com/titix/20/edit

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

与 cmets 中的问题相关的 CoffeeScript：

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()

对任何这些问题的任何帮助都将不胜感激。

Answer 1

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

首先，我们决定将整个项目集包装在一个数组控制器中（这允许我们跟踪所有子项目控制器）。它还允许我们定义项目可以使用的 itemController。

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

其次定义渲染模板（{{render 'items' view.content}}会渲染items模板）

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

示例：http://emberjs.jsbin.com/jegipe/1/edit

Answer 2

Here is a working bin在以下情况下切换表单项的状态，保存按钮单击，取消按钮单击并单击另一个项。

每次我们单击一个项目时，我都会将项目视图引用保存到索引控制器。当点击其他项目时，我使用 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();
    }
  }
});