一种在服务器端预编译纤薄模板并将 HTML 传递给 Rails 应用程序中的 VueJS 的方法? [英] A way to precompile slim templates on server side and pass HTML to VueJS in Rails app?

问题描述

我正在尝试将 Vue js 集成到现有的 Rails 应用程序中，并带有许多纤薄的模板.如果我可以在超薄模板中使用 vue 指令就好了(是的，这是可能的)，获取 HTML 并将其传递给 Vue 实例以进行进一步开发.我知道有将 slim 编译为 html 的 slim-lang 加载器，或者您可以在 <template lang="slim"> 中使用 slim 语法.

I'm trying to integrate Vue js in existing rails app with lots of slim templates. It would be nice if I could use vue directives in slim templates (yes, it's possible), get an HTML and pass it to Vue instance for further development. I know that there are slim-lang loaders that compile slim to html, or that you can use slim syntax inside <template lang="slim">.

但我不想通过 AJAX 单独发送每个 ruby​​/rails 方法的结果.我希望 Rails 完成它的工作并将生成的 HTML 提供给 Vue 实例.对此有何想法和建议?

But I don't want to separately send the result of every single ruby/rails method via AJAX. I want Rails to do its job and give the resulting HTML to Vue instance. Any thoughts and suggestions about this?

推荐答案

我找到的解决方案非常简单.您需要做的就是将您的超薄标记包装在您的 .slim 视图中的 vue 组件标签内，并为其添加 inline-template 属性.

The solution I've found is quite simple. All you need to do is wrap your slim markup inside of vue component tag in your .slim views, and add inline-template attribute to it.

示例:

# 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 代码将首先执行，模板引擎将使用 vue 指令将所有内容转换为 html，然后 Vue 将识别其指令并控制标记.在我实现这个之后，我摆脱了 jquery 和资产管道.但观点是一样的.我没有将任何 html 文件迁移到 vue 组件.借助此功能，您可以将 Vue js 部分应用于现有 Rails 项目并开始编写现代 javascript 代码.

Ruby code will be executed first, template engine will convert everything to html with vue directives, then Vue will recognize its directives and take control of the markup. After I implemented this, I got rid of jquery and asset pipeline. But the views are the same. I did not migrate any of html files to vue components. With this feature, you can partially apply Vue js to your existing rails project and start writing modern javascript code.

这篇关于一种在服务器端预编译纤薄模板并将 HTML 传递给 Rails 应用程序中的 VueJS 的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！