EmberJS:如何更新模型属性 [英] EmberJS: How to update model attributes

问题描述

我有一个由Rails后端提供的消息列表.我需要的是当按下"toggle_visibility"操作按钮时，它将切换"publicly_viewable"属性.这意味着，进行相应的REST调用(以影响数据库)并更改相应的缓存消息的状态.这是我到目前为止的位置.

I've got a list of messages that are provided by a Rails backend. What I need is when the "toggle_visibility" action button is pressed, it would toggle the "publicly_viewable" property. This means, making a corresponding REST call (to effect the database) and changing the state of the corresponding cached message. Here is where I'm at so far.

这是我到目前为止所能做的，最终可以在调试控制台上进行:

Here's what I've got so far, that manages to end up on the debug console:

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

过去的几个小时，我一直在阅读《 Ember Guides》，尽管我对什么的不同类有了一个想法，但我仍然无法清楚地看到如何去做关于它.特别是，我不确定这是路由问题还是控制器，并且我知道，如果这是控制器责任，我知道它应该在ObjectController上，但我一直无法使其正常工作.

I've been spending the past few hours reading through the Ember Guides and while I've gotten an idea on what the different classes there are, I still can't visualize clearly how to go about it. Particularly, I'm not sure if this should be a route concern or a controller, and I know that if ever it was a controller responsibility, I know that it should be on an ObjectController but I've been having trouble making it work.

推荐答案

您可以使用

You can use ArrayController#itemController and define a controller for the individual record in your ModelArray. Then you have to specify in the Array Controller the Object Controller responsible for a single object, which you have to reference as well in Handlebars. You can do something like this:

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> 

(请参见小提琴)

注意:已更新至Ember 1.11.x-beta，并对代码进行了少许更改

Note: Updated to Ember 1.11.x-beta and changed the code a little bit

这篇关于EmberJS:如何更新模型属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！