EmberJS：如何更新模型属性

Question

我有一个由Rails后端提供的消息列表。我需要的是当按下“toggle_visibility”操作按钮时，它会切换“public_viewable”属性。这意味着，进行相应的REST调用（以实现数据库）并更改相应缓存消息的状态。这是我到目前为止的地方。

这里就是我这么远，它成功地结束了调试控制台上：

# app.js 
App.Store = DS.Store.extend({ 
    revision: 12, 
    adapter: DS.RESTAdapter.extend({ 
    url: 'http://localhost:3000' 
    }) 
}); 

App.Message = DS.Model.extend({ 
    body: DS.attr('string'), 
    mobile_number: DS.attr('string'), 
    publicly_viewable: DS.attr('boolean'), 
    created_at: DS.attr('date') 
}); 

App.Router.map(function() { 
    this.resource('messages'); 
}); 

App.MessagesRoute = Ember.Route.extend({ 
    model: function() { return App.Message.find() } 
}); 

App.MessagesController = Ember.ArrayController.extend({ 
    toggle_visibility: function(){ 
    debugger; 
    } 
}); 

# index.html 
{{#each model}} 
<button class="close" {{action toggle_visibility this}}><i class="icon-eye-close"></i></button> 
<p class="message_body lead">{{body}}</p> 
<small class="source_number">from {{mobile_number}}, received {{date created_at}}</small> 
{{/each}} 

我已经花了过去几个小时通过灰烬指南和而我已经得到了阅读一个想法什么有不同的类，我仍然不能想象清楚如何去做。特别是，我不确定这应该是一个路由问题还是一个控制器，并且我知道如果它曾经是一个控制器责任，我知道它应该在ObjectController上，但是我一直无法使其工作。

Answer 1

您可以使用ArrayController#itemController并为您的ModelArray中的单个记录定义一个控制器。然后，您必须在数组控制器中指定负责单个对象的对象控制器，您还必须在Handlebars中引用该对象。你可以做这样的事情：

JS：

App.MessageController = Ember.ObjectController.extend({ 
    visibilityClass: function() { 
     var visibility = this.get('model.publiclyViewable'); 
     return 'toggle-visibility mdi-action-visibility%@'.fmt(
      visibility ? '':'-off' 
     ); 
    }.property('model.publiclyViewable'), 
    actions: { 
     toggleVisibility: function() { 
      var model = this.get('model'); 
      model.toggleProperty('publiclyViewable'); 
      model.save(); 
     } 
    } 
}); 

把手：

<script type="text/x-handlebars" data-template-name="messages"> 
    <!-- 
    At this point the {{each}} helper will know how to lookup for 
    the controller simply by it's name 
    --> 
    {{#each model itemController="message"}} 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <div class="pull-left"> 
       <h3 class="panel-title">{{title}}</h3> 
      </div> 
      <div class="pull-right"> 
       <a {{action 'toggleVisibility'}}> 
        <i class={{visibilityClass}} style="color: #FFF"></i> 
       </a> 
      </div> 
     </div> 
     <div class="panel-body"> 
      {{body}} 
     </div> 
     <div class="panel-footer"> 
      <i class="mdi-communication-quick-contacts-dialer"></i> {{mobileNumber}} 
      <i class="mdi-notification-event-note"></i> {{createdAt}} 
     </div> 
    </div> 

    {{/each}} 
</script> 

（见fiddle）

注：已更新为灰烬1.11.x-β和改变了一点点的代码