Vueで小説投稿サイトのフォームを改良した ref: http://qiita.com/katryo/items/1e3a47ef40ef243966d4

file0.txt

    <%= f.text_area :body, rows:20, id:'js-storyForm__body', 'v-model' => 'body', 'v-on' => 'click: updatePreview, keydown: updatePreview, keyup: updatePreview, keypress: updatePreview' %>

form.js.coffee

class Storyblog.Vue.Stories.Form
  createVue: ->
    @vm = new Vue(
      el: '#js-storyForm'
      data:
        currentTitle: ''
        currentTableType: 'buttonAndCode'
        currentTagType: ''
        currentNotices: []
        currentItems: []
        body: ''
        tags: []
        preparedPictures: []
        currentUserID: null
        isActivePreview: false
        isLoading: false
        toggleActivatePreviewButtonText: 'リアルタイムプレビューをONにする'
        filenameURL: {}

      methods:
        initialize: (e) ->
          @currentTitle = @$data['basicInstruction'].title
          @fillContent('basicInstruction')
          @getCurrentUserID()

        renderPreview: (e) ->
          @changeInstruction(e)
          @updatePreview(e)

        updatePreview: (e) ->
          return unless @isActivePreview
          re = /\[.*?\]/g;
          tags = @body.match(re)
          tagArtRe = /\[(\S+?)\s+(.+?)\]/;
          updatedTags = []
          _.each(tags, (tag) ->
            tagArgArray = tag.match(tagArtRe)
            return unless tagArgArray
            return if tagArgArray.length < 2
            funcName = tagArgArray[1]
            tagArg = tagArgArray[2]
            isBG = false
            if funcName == 'bg'
              isBG = true
            isImage = false
            if funcName == 'image'
              isImage = true
            isTextColor = false
            if funcName == 'text-color'
              isTextColor = true
            isFilter = false
            if funcName == 'filter'
              isFilter = true
            updatedTags.push({ 'whole':tag, 'funcName': funcName, 'arg':tagArg, 'isBG': isBG, 'isImage': isImage, 'isTextColor': isTextColor, 'isFilter': isFilter ,'url': null})
          )
          @tags = updatedTags
          @fetchFromPreparedPictures()
          @updateImagesURLs()
          @setImageURLToTags()

        setImageURLToTags: ->
          self = @
          _.each(@tags, (tag) ->
            if tag['isBG'] or tag['isImage']
              url = self.filenameURL[tag['arg']]
              if url
                tag['url'] = url
              else
                tag['url'] = tag['arg']
          )

        updateImagesURLs: ->
          self = @
          _.each(@tags, (tag) ->
            if tag['isBG'] or tag['isImage']
              self.setImageURLWithPreparedPictures(tag['arg'])
              self.fetchFromCurrentUserPicturesAndSetImageURLWithFilename(tag['arg'])
          )

        getCurrentUserID: ->
          @currentUserID = parseInt($('#js-currentUserID').text())

        fetchFromCurrentUserPicturesAndSetImageURLWithFilename: (filename) ->
          self = @
          return unless @currentUserID
          return if self.filenameURL[filename]
          $.ajax({
              type: 'GET'
              datatype: 'json'
              url: "../../users/#{self.currentUserID}/picture.json",
              data: {
                filename: filename
              }
              success: (image_info) ->
                unless image_info
                  self.filenameURL[filename] = filename
                else
                  file_path = image_info['file_path']
                  if file_path
                    url = file_path['image']['thumb']['url']
                    self.filenameURL[filename] = url
              error: (data) ->
                console.log data
            }
          )
        setImageURLWithPreparedPictures: (filename) ->
          self = @
          return unless self.preparedPictures
          url = self.preparedPictures[filename]
          self.filenameURL[filename] = url if url

        fetchFromPreparedPictures: () ->
          self = @
          return if self.preparedPictures.length > 0
          $.ajax({
              type: 'GET'
              datatype: 'json'
              url: "../../prepared_pictures.json",
              success: (data) ->
                self.preparedPictures = data.prepared_pictures
              error: (data) ->
                console.log data
            }
          )

        toggleActivePreview: (e) ->
          if @isActivePreview
            @toggleActivatePreviewButtonText = 'リアルタイムプレビューをONにする'
            @isActivePreview = false
          else
            @toggleActivatePreviewButtonText = 'リアルタイムプレビューをOFFにする'
            @isActivePreview = true
    )
    @vm.initialize()


Vue.component('previewItem', {
  template: '''
<td><code>{{whole}}</code></td>
<td>
<img class="previewItem__image" v-attr="src:url" v-if="isBG"/>
<img class="previewItem__image" v-attr="src:url" v-if="isImage"/>
<span v-if="isTextColor" v-style="color:arg">文字色</span>
<span v-if="isFilter" v-style="background-color:arg">フィルター</span>
</td>
'''
})