Ember Array作为数据存储

时间:2014-03-12 02:53:59

标签: ember.js

目前我有App.Data.Files = []作为我的部分Ember数据的简单数据存储。如果上面的数组和对象上的一些方法能够保留我需要的东西,目前看不到需要加载Ember Data。

问题: 我目前遇到绑定问题。从数组中删除文件对象时(使用App.Data.Files.pop()之类的东西),Ember不会使用新值更新属性/导航视图。

/images重新渲染时,ImageController等文件类型控制器已经丢失了文件。我应该使用ArrayProxy吗?或者我应该为原始文件设置一个新控制器,然后为每种类型设置控制器吗?

FileObj文件

App.FileObj = Ember.Object.extend
  id: null
  filename: null
  type: null
  size: null
  url: null
  isImage: Ember.computed.match 'type', /image\/.*/
  isPDF: Ember.computed.match 'type', /application\/pdf/
  isOtherFile: (->
    return !this.get('isImage') && !this.get('isPDF')
  ).property('isImage','isPDF')

应用程序控制器:

App.ApplicationController = Ember.Controller.extend
  totalFileCount: (->
    return App.Data.Files.length
  ).property('@each')
  imageCount: (->
    return App.Data.Files.filterProperty('isImage').length
  ).property('@each')

ImagesRoute

App.ImagesRoute = Ember.Route.extend
  setupController: (controller, model) ->
    controller.set('content', App.Data.Files.filterProperty('isImage'))

图像控制器

App.ImagesController = Ember.ArrayController.extend
  content: []
  imageCount: Ember.computed.alias('length')

查看代码段

<!-- Left Hand Navigation -->
<div class="list-group">
  {{#link-to 'images' class='list-group-item'}}
    <span class="badge">{{imageCount}}</span>
    Images
  {{/link-to}}
  {{#link-to 'pdfs' class='list-group-item'}}
    <span class="badge">{{pdfCount}}</span>
    PDFs
  {{/link-to}}
  {{#link-to 'others' class='list-group-item'}}
    <span class="badge">{{otherCount}}</span>
    Others
  {{/link-to}}
</div>

1 个答案:

答案 0 :(得分:1)

您的问题是App.Data.Files.pop()不会触发更新模板所需的绑定/观察者,而应使用App.Data.Files.popObject()

您可以在Ember.MutableArray docs

中看到引入的数组方法

您还需要更新计算出的属性依赖项键,以反映其内部更改的内容

App.ApplicationController = Ember.Controller.extend
  totalFileCount: (->
    return App.Data.Files.length
  ).property('App.Data.Files.length')
  imageCount: (->
    return App.Data.Files.filterProperty('isImage').length
  ).property('App.Data.Files.@each.isImage')

这是jsbin,正在运行