0

我有一个非常简单的要求，但就像 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在呈现页面之前，计算属性被调用一次。当时我假设模型仍在加载，因为长度 = 0。

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

我浏览了Ember页面中的管理异步，并假设locationsPresent如果底层模型发生更改（如果它已完全加载），则计算机属性将被更新，因为页面状态：

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

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

4

1 回答 1

2

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

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

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

于 2013-05-03T07:00:26.110 回答