ajax 请求后更新 emberJS 视图答案

【问题标题】：Updating the emberJS view after an ajax requestajax 请求后更新 emberJS 视图
【发布时间】：2015-02-03 17:32:53
【问题描述】：

所以我尝试使用 ajax 向我的服务器发送自定义操作，并在回调中更新 emberJS 模型。我的控制器代码如下所示：

PlatformUI.CampaignItemController = Ember.ObjectController.extend({
  actions: {
    deleteCampaign: function(){
      var campaign = this.get('model');
      campaign.deleteRecord();
      campaign.save();
    },
    startCampaign: function(){
      var campaign = this.get('model');
      $.ajax({
        url: '/campaigns/' + campaign.get('id') + '/campaign_start.json',
        type: 'GET',
        success: function(data, textStatus, xhr) {
          campaign.set('status', data.started);
          //campaign.save();
        },
        error: function(xhr, textStatus, errorThrown) {
          console.log(xhr);
          alert('start campaign failed');
        }
      });
    }
  }
});

我的模型如下所示：

PlatformUI.Campaign = DS.Model.extend({

  name: DS.attr('string'),
  status: DS.attr('string'),
  updated_at: DS.attr('date'),
  user_id: DS.attr('number'),
  created_at: DS.attr('date'),
  started: function(){
    return this.get('status') == 'true';
  }.property()
});

编辑：添加模板：

<div class="page-header">
  <h1> Campaigns
    List
    <a role="button" class="btn btn-primary" href="/campaigns/new">Create New</a>
  </h1>
</div>
<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
      <th>Last updated</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody>
     {{#each campaign in model itemController="CampaignItem"}}
        <tr>
          <td>{{campaign.id}}</td>
          <td>{{campaign.name}}</td>
          <td>{{ternary campaign.status "Started" "Stopped"}}</td>
          <td>{{campaign.updated_at}}</td>
          <td>
            <a class="btn btn-primary" {{bind-attr href=campaign.edit_url}}>Edit</a>
            <a class="btn btn-danger" {{action "deleteCampaign"}}>Delete</a>
            {{#if campaign.started}}
              <a class="btn btn-primary" {{bind-attr href=campaign.stop_url}}>Stop</a>
            {{else}}
              <a class="btn btn-primary" {{action "startCampaign"}}>Start</a>
            {{/if}}
          </td>
        </tr>
     {{/each}}
    </tbody>
  </table>
</div>

问题是当我执行该操作时它没有刷新视图。我是 emberJS 的新手，所以我也不知道模型是否真的更新了。

【问题讨论】：

你能发表你的看法吗？此外，您可以使用Ember Inspector 来检查模型的状态。
@Oren 检查员告诉我模型已更新。
我在模型中添加了模板和一些缺失的行。

标签： ajax ember.js

【解决方案1】：

您需要让started 知道它是根据status 计算得出的，以便它知道在status 更改时重新计算。

您可以通过在依赖项列表中包含 status 来做到这一点。

started: function(){
    return this.get('status') == 'true';
  }.property('status')

【讨论】：

您还应该将相等比较更改为===
我刚刚注意到我可以将属性类型设置为布尔值，这大大简化了事情。
是的，这肯定会对您有所帮助。不确定如果您的情况下的状态暗示布尔值怎么办。