Upgrade to Pro — share decks privately, control downloads, hide ads and more …

stimulusの感触

 stimulusの感触

masaru-tech

February 25, 2018
Tweet

More Decks by masaru-tech

Other Decks in Programming

Transcript

  1. <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet">Greet</button> <span data-target="hello.output"></span> </div>

    View͔ΒԼهͷ͜ͱ͕෼͔Δ • data-controllerɿhelloͱ͍͏ίϯτϩʔϥʔΛར༻͢Δ • data-actionɿbuttonΛclick͢Δͱhelloͷgreetؔ਺͕ݺ͹ΕΔ • data-targetɿhelloίϯτϩʔϥʔͰnameͱoutput͕ࢀর͞ΕΔ
  2. [src/controllers/hello_controller.js] import { Controller } from "stimulus" export default class

    extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
  3. طଘͷCoffeescriptͰײ͡Δ՝୊ • ର৅ͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ޻෉ • SprocketsʹΑΓ1ͭͷjsϑΝΠϧʹ·ͱΊΒΕΔ͔Βશͯͷjs͕ಈ͍ͯ͠·͏ • ୅දతͳʁbodyʹdata-controller,data-actionΛఆٛ͢Δ΍ͭ • Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔ •

    ܦݧ্ɺ΄ͱΜͲ͕onClick΍onChangeͳͲͷΠϕϯτఆٛʹͳΔ • ্هͷ޻෉ͰϑΝΠϧ͸ಛఆͰ͖Δ͕ɺView͔ΒԿ͕ઃఆ͞Ε͍ͯΔ͔͸෼͔Βͳ͍ • common.coffeeͱ͔utils.coffeeΈ͍ͨͳͷ͕͋ͬͨΒɻɻɻ • ES201xͷைྲྀ • ໾ׂΛऴ͑ͭͭ͋ΔCoffeescript