如何在Vue.js中使用Rails助手？

Question

我已經開始在我的rails應用程序中使用Vue，我想知道如何在Vue中使用我的rails助手。 我認為我必須將其作為一個組成部分。

例如：

films_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 }
        })
    }
}); 

應用程序

<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屬性，以及一個使用helper也返回1h 33m顯示版本的runtime_formatted屬性，所有這些都在JSON中。 通常，這些決定取決於您是否要讓客戶端負責顯示內容的方式，或者是否要由API驅動一致的顯示格式。

希望能有所幫助。

Answer 2

好吧，字面上的答案：困難，直接不可能。 更困難的方法是安裝ruby2js並轉換代碼。 但是由於代碼太少了，所以確實不值得。

順便說一句，您知道可以重命名文件，添加.erb結尾，然后在文件內部使用erb。 這不僅可以方便地使用現有功能，而且可以傳輸數據（從紅寶石到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}"
      }
    }

恕我直言，時間要短得多，麻煩也要少得多。 （KISS原則）請注意，在渲染過程中如何使用to_json（由於＃{}而成為紅寶石）按字面傳遞電影數據。 to_json讓我們輕松地限制屬性（使用：only），如果我需要更多控制，我可以使用rabl