Способ предварительной компиляции тонких шаблонов на стороне сервера и передачи HTML в VueJS в приложении Rails? - PullRequest
Новая
       24

Способ предварительной компиляции тонких шаблонов на стороне сервера и передачи HTML в VueJS в приложении Rails?

0 голосов
/ 12 октября 2018

Я пытаюсь интегрировать Vue js в существующее приложение rails с множеством тонких шаблонов.Было бы хорошо, если бы я мог использовать директивы vue в тонких шаблонах (да, это возможно), получить HTML и передать его экземпляру Vue для дальнейшей разработки.Я знаю, что есть загрузчики slim-lang, которые компилируют slim в html, или что вы можете использовать тонкий синтаксис внутри <template lang="slim">.

Но я не хочу отдельно отправлять результаты каждого метода ruby ​​/ rails через AJAX.Я хочу, чтобы Rails выполнил свою работу и передал полученный HTML-код экземпляру Vue.Есть мысли и предложения по этому поводу?

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Решение, которое я нашел, довольно простое.Все, что вам нужно сделать, это обернуть вашу тонкую разметку внутри тега компонента vue в ваших представлениях .slim и добавить к нему атрибут inline-template.

Пример: 

# header.html.slim

<v-header inline-template>
  header
    nav
      - categories.each do |category|
        = link_to category.name, category, '@click.prevent': 'doSomething'
</v-header>

или 

v-header inline-template=""
  header
    nav
      - categories.each do |category|
        = link_to category.name, category, '@click': 'doSomething'

Сначала будет выполнен код Ruby, механизм шаблонов преобразует все в html с помощью директив vue, затем Vue распознает его директивы и возьмет под контроль разметку.После того, как я это реализовал, я избавился от jquery и конвейера активов.Но взгляды совпадают.Я не перенес ни одного html-файла в vue-компоненты.С помощью этой функции вы можете частично применить Vue js к существующему проекту rails и начать писать современный код JavaScript.

0 голосов
/ 12 октября 2018

Нет серебряной пули для объединения шаблонов на стороне сервера и на стороне клиента.Даже если вы можете визуализировать шаблоны Vue на сервере, ключевой контекст отсутствует (интерактивное состояние страницы в клиенте).

Существует несколько довольно простых, но некорректных методов, которые вы можете использовать для объединения рендеринга на стороне сервера и клиента:

Создание контроллера, обслуживающего ваши представления 

Rails.application.routes.draw do
  scope 'templates' do
    get '*path', to: 'templates#show'
  end
end

class TemplatesController < ApplicationController
  def show
    if lookup_context.exists?(params[:path])
      render template: params[:path]
    else
      head :not_found
    end
  end
end

require 'rails_helper'

RSpec.describe "Templates", type: :request do
  describe "GET /template/*path" do
    it "fetches template if it exists" do
      get '/templates/foo/bar.html.erb'
      expect(response).to have_http_status(200)
      expect(response.body).to match "TEST"
    end
    it "returns 404 if it does not exist" do
      get '/templates/foo/non_existant.html.erb'
      expect(response).to have_http_status(:not_found)
    end
  end
end

Однако дьявол кроется в деталях - это действительно сработает, если ваши представления полностью статичны и не требуют никаких входных данных.

Визуализация представлений без макета

Если вы вместо этого хотите нормально выполнять рендеринг с ваших контроллеров, но не включаете весь макет, вы можете зарегистрировать пользовательский формат: 

# config/initializers/mime_types.rb
Mime::Type.register "text/x-html-template", :template

Иногда вам может потребоваться остановить пружину, чтобы изменения конфигурациибыть поднятым.

Затем вы можете отключить макет для этого формата: 

class ApplicationController < ActionController::Base
  before_action :add_html_to_template_lookup!, if: -> { request.format.template? }
  layout :is_template_request?

  private

  def is_template_request?
    request.format.template? ? false : "application"
  end

  # this will make rails fall back to rendering the "normal" html views
  def add_html_to_template_lookup!
    request.formats << Mime::Type.lookup("text/html")
  end
end
...