Ember.js EmberJS:如何更新模型属性

Ember.js EmberJS:如何更新模型属性,ember.js,Ember.js,我有一个由Rails后端提供的消息列表。我需要的是,当按下“切换可见性”操作按钮时,它将切换“可公开查看”属性。这意味着,进行相应的REST调用(以影响数据库)并更改相应缓存消息的状态。这就是我目前所处的位置 到目前为止,我得到了一些信息,这些信息最终会出现在调试控制台上: # app.js App.Store = DS.Store.extend({ revision: 12, adapter: DS.RESTAdapter.extend({ url: 'http://local

我有一个由Rails后端提供的消息列表。我需要的是,当按下“切换可见性”操作按钮时,它将切换“可公开查看”属性。这意味着,进行相应的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}}
#app.js
App.Store=DS.Store.extend({
修订:12,
适配器:DS.RESTAdapter.extend({
网址:'http://localhost:3000'
})
});
App.Message=DS.Model.extend({
正文:DS.attr('string'),
手机号码:DS.attr('string'),
可公开查看:DS.attr('boolean'),
创建时间:DS.attr('日期')
});
App.Router.map(函数(){
此.resource(“消息”);
});
App.MessagesRoute=Ember.Route.extend({
模型:函数(){return App.Message.find()}
});
App.MessagesController=Ember.ArrayController.extend({
切换_可见性:函数(){
调试器;
}
});
#index.html
{{{#每个模型}

{{body}

从{mobile_number}收到{{date created_at}} {{/每个}}
在过去的几个小时里,我一直在阅读《灰烬指南》,虽然我对那里的不同课程有了一个概念,但我仍然无法清楚地想象如何去做。特别是,我不确定这是路由问题还是控制器,我知道如果这是控制器的责任,我知道它应该在ObjectController上,但我一直很难让它工作。

您可以为
ModelArray
中的单个记录使用和定义控制器。然后,您必须在数组控制器中指定负责单个对象的对象控制器,您还必须在把手中引用该对象。您可以这样做:

JS:

车把:

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

{{{#每个模型itemController=“message”}
{{title}}
)


注意:更新到Ember 1.11.x-beta版,并对代码做了一点修改

Awesome!正是我需要的。我在指南的各个地方都看到了一些片段,但并不完全连贯。谢谢
<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>