分离关注点的正确方法? [英] A proper way to separate concerns?

查看:55
本文介绍了分离关注点的正确方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

My app allows the users to manage their documents. When creating one, a user has to either enter the document content manually or select a file from their computer (which would convert many formats to HTML for the user).

当前,我有一个简单的 FileUploaderView ,它基本上是一个< input type = file> ,用于监听文件更改并使用 {对象:{类型:SOME_TYPE'},内容:SOME_CONTENT} value 属性c $ c>。

Currently, I have a simple FileUploaderView which is basically an <input type="file"> that listens to file changes, and updates the value property of the view with an object like { file: { type: SOME_TYPE' }, content: SOME_CONTENT }.

然后, DocumentsNewController 侦听其中的更改并将支持的文件转换为HTML,然后放入将结果保存到文档主体中。

Then, DocumentsNewController listens to changes in it and converts supported files to HTML, and puts the result into the document body.

但是,以这种方式进行操作感觉简直是错误的,并且不允许简单的重用(我想这样做)。 / p>

However, doing it this way feels simply wrong and does not allow for simple reuse (which I want to be able to do).

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/*"}}

重构文件转换的正确方法是什么

What would be the proper way to refactor file converting stuff out of the controller?

我希望能够执行以下操作:

I want to be able to do something like:

{{documentHandler resultBinding="documentUpload"}}

并在控制器中

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

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

我的第一个想法是制作一个 DocumentHandlerView ,它将显示输入字段,显示微调器,显示错误,解析文档并将结果分配给 result (并且由于控制器的模板具有 resultBinding = documentUpload ,因此HTML会触发

My first thought was to make a DocumentHandlerView which would display the input field, show the spinner, show the errors, parse the document and assign the result to result (and since controller's template has resultBinding="documentUpload", the HTML would trigger the controller's observer).

使用该视图可以简化重用,但我仍然认为解析文档不是视图的工作。

Using a view for that would allow for easier reuse but I still feel it's not the view's job to parse the document.

有更好的方法吗?

推荐答案

仔细阅读您的问题后,发现最好的方法是请记住要创建 Ember.Mixin ,然后将其用于所有需要相同功能的控制器。

After reading closely your question the best thing that comes in mind would be to create a Ember.Mixin and then use it for all the controllers that need the same functionality.

示例摘自余烬 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 自己,然后将所有常见的逻辑放入其中。

The example is only conceptual, but it will be easy to create a mixin yourself and put all the common logic in there.

希望它会有所帮助。

这篇关于分离关注点的正确方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆