Question

我已经开始在我的rails应用程序中使用Vue了，我想知道如何在Vue中使用我的rails助手。我想我必须把它作为一个组成部分。

例如：

movies_helper.rb

module MoviesHelper

   def runtime(runtime)
        hours = runtime / 60
        mins  = runtime % 60

        dur = "#{hours}h #{mins}m"
    end

end

的application.js

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener("turbolinks:load", function() {
    var movieDiv = document.querySelector("#movies")
    if (movieDiv != undefined) {
        const app = new Vue({
            el: movieDiv,
            data: {
                movies: JSON.parse(movieDiv.dataset.movies)
            },
            template: "<App :original_movies='movies' />",
            components: { App }
        })
    }
});

app.vue

<template>
    <ul id="app" class="movies">
    <li v-for="movie in original_movies" class="movie card">
        {{ movie }}
    </li>
    </ul>
</template>

<script>

export default {
    props: ["original_movies"],
}

Answer 1

您不能直接从客户端JavaScript调用您的Ruby代码。如果它只是您希望在客户端复制的特定助手，那么移植到JavaScript很容易：

const runtime = (runtime) => {
  hours = parseInt(runtime / 60)
  mins = runtime % 60
  return hours + "h " + mins + "m"
}

如果您更普遍地希望能够使用Rails端的帮助程序以某种方式显示数据，那么您可以从服务器端API调用中调用帮助程序，该调用将返回JSON数据首先 - 例如，您可以在几分钟内返回runtime属性，以及使用您的助手返回runtime_formatted显示版本的1h 33m属性， JSON。通常，这些决定取决于您是否希望客户负责显示某些内容，或者您是否希望API能够驱动一致的显示格式。

希望有所帮助。

Answer 2

好的，字面答案：很难，直接不可能。更难的方法是安装ruby2js并转换代码。但由于代码很少，所以它真的不值得。

顺便说一句，你知道你可以重命名文件，添加.erb结尾，然后在文件中使用erb。这不仅可以使用现有功能，还可以传输数据（从ruby到vue）

我倾向于在rails模板中为vue编写应用程序部分（实际上是haml。在ruby中，使用ruby2js）。这样您就可以访问帮助程序和控制器数据。但是当然只有在渲染模板时才会出现。但这往往会有很长的路要走。

实际上，甚至可以使用x-template语法以这种方式创建组件。然后你可以用haml编写模板，rails渲染成html和vue解析。

我会在haml代码中尝试演示（即获取渲染的rails视图（可能是部分）

#movies
  %ul.movies
    %li.movie_card{ "v-for": "movie in movies"}
      {{ movie }}
:javascript
  const app = new Vue({
    el: "#movies",
      data: {
        movies:  "#{@movies.to_json}"
      }
    }

更短，更少麻烦，imho。（KISS原则）请注意在渲染期间，如何使用to_json（因为＃{}而导致的红宝石）按字面传递电影数据。 to_json让你轻松限制属性（只有：）如果我需要更多控制我使用rabl

如何在Vue.js中使用rails helper？

2 个答案: