0

我的应用程序允许用户管理他们的文档。创建文件时，用户必须手动输入文档内容或从他们的计算机中选择一个文件（这将为用户将许多格式转换为 HTML）。

目前，我有一个简单FileUploaderView的，它基本上是一个<input type="file">监听文件更改，并value使用像{ file: { type: SOME_TYPE' }, content: SOME_CONTENT }.

然后，DocumentsNewController监听其中的变化并将支持的文件转换为 HTML，并将结果放入文档正文。

但是，这样做感觉完全错误，并且不允许简单的重用（我希望能够这样做）。

App.DocumentsNewController = Ember.ObjectController.extend
   # ... stuff ...

  handleDocumentUpload: (->
    doc = @get 'documentUpload'
    return unless doc

    Ember.run =>
      @set 'uploadError', false
      @set 'unsupportedFile', false
      @set 'processingUpload', true

    type = doc.file.type
    text = ''

    try
      if type.match /^text\//
        text = doc.content
        # Convert new lines to br's and paragraphs
        text = '<p>' + text.replace(/\n([ \t]*\n)+/g, '</p><p>').replace('\n', '<br />') + '</p>'
      else if type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        text = new DOCX2HTML(doc.content).convert()
      else
        @set 'unsupportedFile', true
    catch error
      @set 'uploadError', true
    finally
      @set 'text', text
      Ember.run => @set 'processingUpload', false
  ).observes 'documentUpload'

模板类似于

... stuff ...

{{view App.FileUploaderView valueBinding="documentUpload" accept="text/*"}}

将文件从控制器中转换出来的正确方法是什么？

我希望能够做类似的事情：

{{documentHandler resultBinding="documentUpload"}}

并在控制器中

App.DocumentsNewController = Ember.ObjectController.extend
  # ... stuff ...

  handleDocumentUpload: (->
    if doc = @get 'documentUpload'
      @set 'text', doc
  ).observes 'documentUpload'

我的第一个想法是制作一个DocumentHandlerView显示输入字段，显示微调器，显示错误，解析文档并将结果分配给result（并且由于控制器的模板具有resultBinding="documentUpload"，HTML 将触发控制器的观察者）。

为此使用视图可以更轻松地重用，但我仍然觉得解析文档不是视图的工作。

有没有更好的办法？

4

1 回答 1

0

仔细阅读您的问题后，想到的最好的事情是创建一个Ember.Mixin，然后将其用于需要相同功能的所有控制器。

来自 ember API 文档的示例：

App.Editable = Ember.Mixin.create({
  edit: function() {
    console.log('starting to edit');
    this.set('isEditing', true);
  },
  isEditing: false
});

// Mix mixins into classes by passing them as the first arguments to
// .extend.
App.CommentView = Ember.View.extend(App.Editable, {
  template: Ember.Handlebars.compile('{{#if isEditing}}...{{else}}...{{/if}}')
});

commentView = App.CommentView.create();
commentView.edit(); // outputs 'starting to edit'

这个例子只是概念性的，但很容易创建一个mixin你自己并将所有常见的逻辑放在那里。

希望能帮助到你。

于 2013-07-05T23:03:56.163 回答