Given this Stimulus controller, what will be the console output when the button is clicked?
export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = "Connected";
}
greet() {
console.log("Hello from Stimulus!");
this.outputTarget.textContent = "Greeted";
}
}And the HTML:
<div data-controller="hello"> <button data-action="click->hello#greet">Click me</button> <span data-hello-target="output"></span> </div>
Remember the connect() method runs when the controller loads, and the greet() method runs on button click.
The connect() method sets the span text to "Connected" initially. When the button is clicked, the greet() method logs "Hello from Stimulus!" and updates the span text to "Greeted".
Which attribute should you add to a <turbo-frame> tag to load its content asynchronously when the frame is first shown?
Think about how browsers handle lazy loading for images and frames.
The loading="lazy" attribute tells Turbo Frames to load content only when needed, improving performance.
Consider this Stimulus controller:
export default class extends Controller {
static values = { count: Number }
connect() {
this.countValue = 0;
}
increment() {
this.countValue++;
console.log(this.countValue);
}
}And the HTML:
<div data-controller="counter"> <button data-action="click->counter#increment">Add</button> </div>
What will be logged after clicking the button 3 times?
Check how countValue is initialized and updated.
The countValue starts at 0 on connect, then increments by 1 each click, so logs 1, then 2, then 3.
You have a Turbo Stream response to update a <div id="message"> but the page does not update. What is the most likely cause?
Turbo Stream response:
<turbo-stream action="update" target="message"> <template>New message content</template> </turbo-stream>
HTML snippet:
<div id="msg">Old message</div>
Check the target attribute and the HTML element's id carefully.
The Turbo Stream targets an element with id "message" but the HTML has id "msg". They must match exactly for the update to work.
Which statement best explains how Turbo Drive enhances navigation in Rails applications?
Think about how Turbo Drive handles navigation events.
Turbo Drive intercepts link clicks and form submissions to load pages via AJAX, replacing full reloads with faster partial updates, improving speed and smoothness.