Как добавить пользовательский ввод для пересчета кода в контроллере, а затем показать в том же представлении?

Глядя, чтобы быть указано в правильном направлении. На мой взгляд, у меня есть простая форма, которая принимает число. Я хочу отправить ввод этого для использования в расчетах в моем контроллере, а затем обновить, чтобы пользователь мог видеть в режиме реального времени.

index.html.erb Простая форма ввода, за которой следует вывод расчета:

<%= form_with do |form| %>
<%= form.text_field :number %>
<%= form.submit "Submit" %>
<% end %> 

<%= @output %>

Расчет в контроллере:

@output = params[:number].to_i * 2

Код — просто глупый пример, но идея такова: пользовательский ввод в представлении, который затем я мог бы поместить в вычисление в моем контроллере, а затем отправить обратно в представление. Мне не нужна база данных, так как мне не нужно хранить какую-либо информацию.

После исследования многие люди предлагают Ajax для этого в рельсах? Это путь или есть что-то в Ruby, что я могу использовать для того же эффекта. Я также видел использование бестабличных моделей. Что было бы лучшим решением здесь для меня? Я предполагаю, что пересчет кода в контроллере является ключевым битом.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
55
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Параметры, отправляемые из браузера в приложение Ruby on Rails, доступны контроллеру через метод params.

Ваш метод контроллера, скорее всего, будет выглядеть так:

@output = params[:number].to_i * 2

Примечание. Я также добавил to_i, чтобы пользовательский ввод не использовался в строковом представлении, а фактически преобразовывался в число.

Спасибо, что подтвердили, как извлечь данные из формы — я обновил код. Я все еще задаю вопрос, лучший ли это способ сделать то, что я хочу? Требуется ли для работы этого метода form_with база данных и т. д.? Поскольку я искал решение, которое не требовало этого. Спасибо

ldthompson 04.02.2023 14:17
Ответ принят как подходящий

Да, вы можете сделать это с помощью AJAX. В Rails для этого можно использовать контроллер Stimulus.

Ниже приведена простая демонстрация:

  1. У меня есть контроллер под названием pages, и он выглядит так.
class PagesController < ApplicationController
  def index
  end

  def receive
    render json: { body: params }
  end
end

Тогда представление pages#index должно быть таким.

<div class = "input-form" data-controller = "ajax">
  <%= form_with url: receive_path, data: { ajax_target: 'form', action: 'submit->ajax#send' } do |form| %>
    <%= form.text_field :number %>
    <%= form.submit "Submit" %>
  <% end %>
  <p data-ajax-target = "output"></p>
</div>

Он имеет вашу форму и тег p с data-ajax-target="output" - это элемент, в котором вы отображаете входные данные формы.

Затем вы генерируете новый вызывающий контроллер стимула ajax и ставите что-то вроде этого.

export default class extends Controller {
  static targets = ['form', 'output']
  connect() {
    console.info(this.formTarget);
    console.info(this.outputTarget);
  }

  send(event) {
    event.preventDefault();

    fetch(this.formTarget.action, {
      method: 'POST',
      headers: { "Accept": "application/json" },
      body: new FormData(this.formTarget)
    })
      .then(response => response.json())
      .then(data => {
        this.outputTarget.innerHTML = data.body.number * 2;
      });
  }
}

И вам нужно убедиться, что вы определили почтовый маршрут.

Rails.application.routes.draw do
  root 'pages#index'
  post 'receive', to: 'pages#receive'
end

Надеюсь, это имеет смысл.

Спасибо за помощь. Однако, похоже, он пока не работает. Внутри моего HomeController < ApplicationController я поместил код def index и def receive. Внутри home#index вида я вставил код формы ввода. Затем я сделал новый контроллер с именем ajax.rb и вставил код ajax, мне нужно как-то сделать специальный контроллер Stimulus или вы просто имели в виду новый контроллер с именем ajax.rb? Наконец, в маршрутах, которые у меня есть, `root 'home#index' post 'receive' to: 'home#receive' `

ldthompson 05.02.2023 23:31

Обновление: после некоторых исследований Stimulus я убедился, что Stimulus установлен в Gemfile, и я поместил код ajax в /controllers/ajax_controller.js, но все равно не повезло

ldthompson 06.02.2023 00:01

Ты неправильно истолковал это, дружище. AJAX означает асинхронный JavaScript и XML. Это способ JS для обработки HTTP-запросов. Stimulus — это JS-фреймворк, который поставляется с рельсами. Это то, что рельсы используют для управления JS. В вашем приложении rails вы можете найти каталог app > javascript, а внутри него у вас есть каталог контроллера. Там будут размещены ваши контроллеры Stimulus.

jkvithanage 06.02.2023 01:25

Чтобы создать контроллер Stimulus, вам нужно запустить rails g stimulus your_conroller_name, и он сгенерирует файл JS внутри вышеупомянутого каталога. В этом случае, когда вы запускаете rails g stimulus ajax, он генерирует ajax_controller.js, и именно туда вы должны поместить этот фрагмент JS. Проведите небольшое исследование о том, как работает Stimulus. Просто то, что он делает, намного проще обрабатывает события DOM с атрибутами данных. Вы можете видеть, что в представлении pages#index я поместил некоторые атрибуты данных. Это контроллеры стимулов, действия и цели.

jkvithanage 06.02.2023 01:26

Спасибо за уточнение - работает отлично. У меня есть еще один вопрос, если вы не возражаете. В контроллере Home#index у меня есть переменная: target = 13.5, затем у меня есть куча кода, который выполняет некоторые вычисления с использованием этой переменной. В моем вопросе я использовал * 2 просто в качестве примера. Вместо того, чтобы брать введенное пользователем значение и выполнять вычисление x2, а затем отображать его на экране. Я хотел бы обновить переменную target тем, что пользователь отправил в поле. Я предполагаю, что в моем контроллере Ajax мне нужно определить ввод как переменную, а затем передать это в мой Home#index?

ldthompson 06.02.2023 12:40

Означает ли это, что ваш окончательный результат основан на всех этих расчетах? Если это так, переместите их в контроллер стимула. Интерпретируйте логику в JS вместо ruby.

jkvithanage 06.02.2023 13:27

Другие вопросы по теме