Question

我的应用允许用户管理他们的文档。创建一个用户时，用户必须手动输入文档内容或从他们的计算机中选择一个文件（这将为用户将许多格式转换为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（并且因为控制器的模板具有{ {1}}，HTML将触发控制器的观察者。）

使用视图可以更容易地重用，但我仍然认为解析文档不是视图的工作。

有更好的方法吗？

Answer 1

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

取自余烬API docs的例子：

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并将所有常用逻辑放在那里。

希望它有所帮助。

分离问题的正确方法？

1 个答案: