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-β和改變了一點點的代碼