Question

我有一个非常简单的要求，但就像在Ember.JS中有很多东西一样，我正在试图让它实现它的头撞墙。

我有一个概览屏幕，其中有几条记录显示在表格中。

要渲染概览屏幕，我正在使用以下路线

App.LocationsIndexRoute = Ember.Route.extend({

  setupController: function(controller) {
    var locations = App.Location.find();
    controller.set('content', locations);
  },

  renderTemplate: function() {
    this.render('locations.index',{into:'application'});
  }

});

这很好用。我现在想有条件地呈现概述表。

如果存在记录，则呈现表格。
如果没有记录，则显示消息。

我尝试使用以下控制器实现此功能。

App.LocationsIndexController = Ember.ArrayController.extend({
  locationsPresent: function() {
    var model = this.get('content');
    return model.content.length > 0;
  }.property()
});

和以下模板

{{#if locationsPresent}}

  <table class="table table-hover">
  <tr>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Accuracy</th>
    <th></th>
    <th></th>
  </tr>
    {{#each location in model}}
      <tr>
      <td>{{location.latitude}}</td>
      <td>{{location.longitude}}</td>
      <td>{{location.accuracy}}</td>
      <td>{{#linkTo locations.edit location}}Edit{{/linkTo}}</td>
      <td><button {{action removeItem location}}>Delete</button></td>
      </tr>
    {{/each}}
  </table>

{{else}}
  No locations present.
{{/if}}

在呈现页面之前，会调用计算的locationsPresent属性一次。那时我假设模型仍然被加载为length = 0。

呈现页面时，App.Locations.find（）中的位置可用，但不再调用locationsPresent，这意味着页面决定呈现No locations present.消息。

我浏览了Managing Asyncrony in Ember页面，并假设如果基础模型发生更改（如果已完全加载），则会更新计算机属性locationsPresent，如页面所示：

使用作者的计算属性消除了在底层属性发生更改时显式调用回调计算的需要。

我很想知道我做错了什么，以及如何解决这个问题，但更重要的是，为什么我似乎错过了Ember.JS的一些核心概念。如果有人可以指出我在文档/指南中的位置，我会很乐意解释。

Answer 1

我认为这是一个简单的解决方法。您需要添加您正在观察的属性。像这样：

locationsPresent: function() {
  var length = this.get('content.length');
  return length > 0;
}.property('content.@each')

如果locationsPresent需要重新计算添加的内容，则需要添加@each。我想你也可以观察'content.isLoaded'

控制器没有看到更新的模型 - 异步处理

1 个答案: