刺激JS控制器

Question

如何在页面加载上调用刺激控制器功能？ 这是我在刺激控制器中的功能：

hide(event)
{
    $(this.testTargets[0].tpggle(event.currentTarget.checked);
}

Answer 1

  connect() {
    this.[call action function name on target you want to set]   
  }

无法通过您给出的内容来判断该名称是什么，但是连接功能会在加载上调用。

评论后编辑

好吧，因为我不知道您的HTML或您的刺激控制器是什么样的。我要猜测。

我在一行上看到复选框，因此我假设您有一个要在页面加载上检查的复选框。我假设您的HTML看起来像这样：

<div data-controller="test">
  <h1 class="font-bold text-4xl">Test#index</h1>
  <p>Find me in app/views/test/index.html.erb</p>
  <%- arr = %w{one two three four five} %>
  <%- arr.each do |t| %>
    <%= check_box_tag t,'0',false ,data:{test_target:"checkbox"}%>
    <label><%= t %></label>
  <%- end %>
</div>

只是一个具有5个目标的复选框的页面。

要检查第一个，它只是：

// file test_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "checkbox"]

  connect() {
    this.checkboxTargets[0].checked = true
  }

}

但是我还假设您将使用复选框做其他事情。也许隐藏/显示一个元素。我不知道您将要做什么，但是如果您确实想在页面上隐藏/显示元素，那将是这样的，并且您有一个我们要切换的类 hidden ：

<div data-controller="test">
  <h1 class="font-bold text-4xl">Test#index</h1>
  <p>Find me in app/views/test/index.html.erb</p>
  <%- arr = %w{one two three four five} %>
  <%- arr.each do |t| %>
    <%= check_box_tag t,'0',false ,data:{test_target:"checkbox",
      action:"test#doSomething"}%>
    <label><%= t %></label>
  <%- end %>
  <div class="hidden" data-test-target="display">
    <span>Display one</span>
  </div>
  <div class="hidden" data-test-target="display">
    <span>Display two</span>
  </div>
  <div class="hidden" data-test-target="display">
    <span>Display three</span>
  </div>
  <div class="hidden" data-test-target="display">
    <span>Display four</span>
  </div>
  <div class="hidden" data-test-target="display">
    <span>Display five</span>
  </div>
</div>

和扩展的控制器：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "checkbox","display"]

  connect() {
    this.checkboxTargets[0].checked = true
    this.displayTargets[0].classList.remove('hidden')
  }

  doSomething(){
    var idx = this.checkboxTargets.indexOf(event.target)
    this.displayTargets[idx].classList.toggle('hidden')
  }
}

希望这能让您入门。掌握刺激术语需要一些时间。

Answer 2

尝试一下我的家伙！ W状态管理的痛苦

刺激之所以很棒，是因为它确实可以减轻终端中

$ rails g stimulus checkbox && rails g stimulus multiple_checkboxes

：在App/JavaScript/Controllers/Checkbox_controller.js中

// app/javascript/controllers/checkbox_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="checkbox"
export default class extends Controller {
  static values = {
    toggled: Boolean // Defaults to false
  }

  static targets = [ "checkbox" ]

  // Lifecycle Callbacks
  // https://stimulus.hotwired.dev/reference/lifecycle-callbacks#methods
  
  // initialize(){
  //   console.log("checkbox_controller initialized")          //  Once, when the controller is first instantiated
  // }
  // 
  // connect() {
  //   console.log("checkbox_controller connected")            // Anytime the controller is connected to the DOM
  // }
  // 
  // disconnect(){
  //   console.log("checkbox_controller disconnected")         // Anytime the controller is disconnected from the DOM
  // }
  // 
  // checkboxTargetConnected(element) {
  //   console.log("checkbox_controller target connected")     // Anytime a target is connected to the DOM
  // }
  // 
  // checkboxTargetDisconnected(element) {
  //   console.log("checkbox_controller target disconnected")  // Anytime a target is disconnected from the DOM
  // }

  changeToggleValue(element){
    this.toggledValue = !this.toggledValue
  }

  toggledValueChanged(value, previousValue) {
    if (previousValue != undefined ) {
      console.warn('toggledValueChanged')
      console.log('previousValue')
      console.log(previousValue)
      console.log('value')
      console.log(value)
    }
  }

}

，在App/Javascript/Controllers/Moruty_checkboxes_controller.js中

// app/javascript/controllers/multiple_checkboxes_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="multiple-checkboxes"
export default class extends Controller {
  static values = {
    toggled: Boolean
  }

  static targets = [ "checkbox" ]

  checkboxTargetConnected(element) {
    console.log('multiple-checkboxes checkboxTargetConnected')
  }

  changeToggleValue(){
    console.log('changeToggleValue')
    this.toggledValue = !this.toggledValue
    this.checkboxTargets.forEach(targ => targ.checked = this.toggledValue)
    this.anotherFunction()
  }

  selectAll(){
    console.log('selectAll:')
    if (this.toggledValue != true) {
      this.toggledValue = true
      this.checkboxTargets.forEach(targ => targ.checked = true)
      this.functionYouWantToInvokeOnSelectAll()
    } else {
      console.log('nothing to do! All targets are selected')
    }
  }

  functionYouWantToInvokeOnSelectAll(){
    console.log('The more the merrier')
  }

  unselectAll(){
    console.log('unselectAll:')
    if (this.toggledValue != false) {
      this.toggledValue = false
      this.checkboxTargets.forEach(targ => targ.checked = false)
      this.functionYouWantToInvokeOnUnselectAll()
    } else {
      console.log('nothing to do! No targets are selected' )
    }
  }

  functionYouWantToInvokeOnUnselectAll(){
    console.log('Less is more')
  }

  anotherFunction(){
    console.log('yezzzzirr')
  }

  toggledValueChanged(value, previousValue) {
    if (previousValue != undefined ) {
      console.warn('toggledValueChanged')
      console.log('previousValue')
      console.log(previousValue)
      console.log('value')
      console.log(value)
    }
  }

}

，最终在您的视图中：

<!-- 
Paste this in the head tag that lives in application.html.erb if you dont already have Tailwind installed 

<script src="https://cdn.tailwindcss.com"></script>
-->

<div data-controller="checkbox" class="my-5">
  <span class="text-3xl"> checkbox </span>
  <br>
  <input type="checkbox" data-checkbox-target="checkbox" data-action="checkbox#changeToggleValue">
  <label for=""> w/e </label>
</div>

<div data-controller="multiple-checkboxes" class="my-5">
  <span class="text-3xl"> checkboxezzzz </span>
  <br>
  <div class="my-3 flex space-x-3">
    <button
     type="button"
     data-action="multiple-checkboxes#changeToggleValue"
     class="inline-flex items-center rounded border border-transparent bg-blue-100 px-2.5 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Toggle
    </button>
    <button
     type="button"
     data-action="multiple-checkboxes#selectAll"
     class="inline-flex items-center rounded border border-transparent bg-blue-100 px-2.5 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Select All
    </button>
    <button
     type="button"
     data-action="multiple-checkboxes#unselectAll"
     class="inline-flex items-center rounded border border-transparent bg-blue-100 px-2.5 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Unselect All
    </button>
  </div>
  <div class="space-y-3">
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
    <div>
      <input type="checkbox" data-multiple-checkboxes-target="checkbox">
      <label for=""> w/e </label>
    </div>
  </div>
</div>

祝您好运！