1

Rails バックエンドによって提供されるメッセージのリストがあります。私が必要とするのは、「toggle_visibility」アクション ボタンが押されたときに、「publicly_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}}

ここ数時間、Ember Guides を読んでいて、さまざまなクラスが何であるかについてのアイデアを得ましたが、それをどのように行うかを明確に視覚化することはまだできません. 特に、これがルートの問題なのかコントローラーなのかはわかりません。コントローラーの責任である場合は、ObjectController 上にある必要があることはわかっていますが、機能させるのに問題がありました。

4

1 に答える 1

2

ArrayController#itemControllerの個々のレコードに対してコントローラを使用および定義できますModelArray。次に、ハンドルバーでも参照する必要がある単一のオブジェクトを担当するオブジェクト コントローラーを配列コントローラーで指定する必要があります。次のようなことができます。

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 に更新し、コードを少し変更しました

于 2013-04-28T17:28:12.940 に答える