Rails refactor将一个turbo-frame改成stimulus

一个post的修改、翻译、删除等功能，原来是用turbo-frame实现的，其中要判断用户是否登录、是否具有权限等问题，相对来说逻辑处理偏多一点。
在通过turbo-frame处理的时候，需要将逻辑控制放到view端来处理，计划通过stimulus controller来refactor。

rails g stimulus postController
      create  app/javascript/controllers/post_controller.js

action: 'click->post#translate'

先设置controller
<div data={controller: 'post'}>
  <button  data={action: 'click->post#translate'}>翻译</button>
</div>
 还要加上服务器翻译用的url地址
data-post-turl-value=""
从服务器返回的翻译后的文本，需要替换原有的文本。
代码大概如下
#app/javascript/controllers/post_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="post"
export default class extends Controller {
  static values = {turl: String, eurl: String, durl: String}
  static targets = ['content','translation']

  connect() {
    //console.log(this.contentTarget.textContent)
  }

  translate() {
    fetch(this.turlValue)
      .then(response => response.text())
      .then(html => this.translationTarget.innerHTML = html);
  }
}



阅读量: 809
发布于:
修改于: