Question

前言：我是EmberJS newb

我正在开发一个项目，显示用户编辑活动的表单。此模型中有多个关联，其中一个是eventImages。

eventImages: DS.hasMany("event-image", { async: true })

这是我的EventImage型号

`import DS from 'ember-data'`

EventImage = DS.Model.extend
  event: DS.belongsTo('event', { async: true })

  ### NATURAL ATTRIBUTES ###
  imageUrl: DS.attr("string")
  fileName: DS.attr("string")
  fileSize: DS.attr("string")
  primary: DS.attr("boolean")
  featured: DS.attr("boolean")


`export default EventImage`

在活动表单上，我有一个位置，用户可以上传多个图像，以便在他们正在编辑/创建的事件的前端显示。问题在于，我似乎无法将各个部分放在一起，说明事件模型如何从API中获取关联数据。

后端（Rails）路由是/api/events和/api/events/:event_id/event_images，但是当加载编辑表单时，我没有看到ajax调用来获取事件图像。

以下是edit.coffee中的routes文件：

`import Ember from 'ember'`
`import DirtyConfirmRouteMixin from 'my-app/mixins/dirty-confirm-route'`

EventEditRoute = Ember.Route.extend DirtyConfirmRouteMixin,
  setupController: (controller, model) ->
    @_super(controller, model)
    @controllerFor("event-type-selector").set("promise", @store.find("event-type", forSelector: true))
    @controllerFor("venue-selector").set("promise", @store.find("venue", forSelector: true))

`export default EventEditRoute`

任何有关如何获取相关数据并在把手模板中显示这些项目的帮助都将非常感激。我当然愿意粘贴任何需要的代码。感谢

编辑表单模板（templates/event/partials/form）：

  <div class="field">
    <label class="label label__text">More images</label>

    {{#core-image-multiple-uploader model=model processedFiles=model.eventImages}}
      Select additional event photos (10 max).
    {{/core-image-multiple-uploader}}
  </div>

Core Image Multiple Uploader Templte：

<div class="input">

  {{#each file in processedFiles}}
    <div {{action 'removeImage' _view.contentIndex}} class="preview-wrapper">
      {{event-image-preview file}}
    </div>
  {{/each}}

  <div class="input__wrapper input__wrapper--secondary">
    <div class="file-input">
      <p class="file-input__text">
        {{yield}}
      </p>
      <div class="file-input__actions">
        <input type="file" accept='image/jpeg,image/gif,image/png,image/tiff' class="file-upload-field" multiple />
        <a href="javascript:void({});" class="button button--medium">Choose Files</a>
        <span class="file-input__actions__filename">
          {{fileName}}
        </span>
      </div>
    </div>
  </div>
</div>

多图像上传器组件

`import Ember from 'ember'`

CoreImageMultipleUploaderComponent = Ember.Component.extend
  classNames: ["uploader--core-image"]
  processedFiles: []
  maxFiles: 10
  model: undefined

  _readFile: (idx, file) ->
    new Promise (resolve, reject) ->
      reader = new FileReader
      reader.onloadend = (evt) ->
        if evt.target.readyState == FileReader.DONE
          resolve
            fileName: file.name
            b64: evt.target.result
            id: idx

      reader.readAsDataURL(file)

  setImagesOnModel: (data) ->
    model = @get('model')
    currentImages = data.map((x) -> x.b64)
    model.set('images', currentImages) if model?

  _initFileChange: (->
    @$('input[type=file]').on 'change', (evnt) =>
      files = evnt.target.files
      promises = []
      if files.length and files.length <= @get('maxFiles')
        Ember.run =>
          for k,v of files
            if typeof v is 'object'
              promises.push(@_readFile(k, v))

          Promise.all(promises).then((data) =>
            @set('processedFiles', data)
            @_setImagesOnModel(data)
          )
  ).on("didInsertElement")

  actions:
    removeImage: (idx) ->
      current = @get('processedFiles')
      filtered = current.filter (x, i) -> i isnt idx
      @set('processedFiles', filtered)


`export default CoreImageMultipleUploaderComponent`

Ember.js发布模型关联和获取数据

0 个答案: