Ask A Question

Notifications

You’re not receiving notifications from this thread.

Stimulus JS Twitter UI: Part 2 Discussion

Great content, as always.  An idea for another Stimulus screencast: reimplement
the 'Using VueJS for Nested Forms in Rails' series in Stimulus.
Reply
Nice idea
Reply
+1
Reply
+1
Reply
+1
Reply
+1
Reply

+1

Reply

+1

Reply
I think that a great topic to cover would be a slick search page with no refreshes. Maybe just something simple like only showing 10 tweets at a time, but adding a search bar which, when you type into it, fetches tweets matching that search and replaces the content on the page. Could also be a neat chance to throw in some basic CSS Animations!
Reply
I think this is a great idea. Perhaps redoing the '@mention' episode you did many months ago, but using Stimulus -- so you do autocomplete on some character trigger or in a search box -- would be a cool thing to see....I think.

Also, Stimulus and other popular gems (say SimpleForm).
Reply
Hi, I just subscribed to learn a bit more about Stimulus and specifically how to integrate it with ActionCable which you mentioned at the start of this two part episode. Are you planning a part 3 to cover this or did I misunderstand? I don't mean this as a criticism as the episodes are great as they are but this was one area in particular I was interested in.

I have an application which already uses ActionCable to allow me to push content to the UI when models change on the server but if I am going to use Stimulus I need a way to achieve the same thing. I have managed to get this to work by subscribing to any relevant ActionCable channels in the 'connect' method but wondered if this was the best approach. Any advice would be gratefully received. 

I really like what I've seen on your screencasts so far and look forward to working my way through the other episodes. Great work! Many thanks, Craig.
Reply
+1, a Stimulus with ActionCable video would be great.
Reply
Is there any reason we can't put the data action as a button click on the submit button instead of the ajax:beforeSend on the actual form? I can't seem to get the latter to correctly register. 
Reply

@Chris I found your Stimulus github issue but I also don't undertsand why ajax:beforeSend is required to get preventDefault to work:

"this is a remote form using rails ujs, and we have to use the AJAX before send event, and we'll pass that into our tweet form submit action."

In my case I'm simply trying to use preventDefault with a remote link but I can't get it to work as expected.

Reply

Another great episode.
Stimulus isn't at the level of react/vue that provide great abstraction (no direct dom manipulation, html changes magically with state change etc).
It feels just like writing jquery.

BUT, the killer feature, over jquery, is the "sprinkled html".
Now, just by reading html we can get a hang of what's happening. Inability to do this always bugged when trying to reverse engineer a js behaviour in a website.

And here's a tad-bit refactored tweetform controller with constants, getters/setters:

import { Controller } from "stimulus"

class TweetFormController extends Controller {
  static targets = [ "body", "characterCount" ]

  initialize() {
    this.update()
  }

  update() {
    this.characterCount = this.bodyLength
    if (this.notATweet()) {
      this.characterCountTarget.classList.add('text-danger')
    } else {
      this.characterCountTarget.classList.remove('text-danger')
    }
  }

  submit(event) {
    if (this.notATweet()) {
      console.log('yup not a tweet')
      event.preventDefault()
    }
  }

  notATweet() {
    return (this.body.length > TweetFormController.maxTweetLength)
  }

  get body() {
    return this.bodyTarget.value
  }

  get bodyLength() {
    return this.body.length
  }

  set characterCount(value) {
    this.characterCountTarget.textContent = value
  }
}

TweetFormController.maxTweetLength = 10

export default TweetFormController
Reply

Hi All!

Any idea a good way to edit all fields in a model, like in a crm.

As this example is only editing one field 'body', what if I wanted to edit; title, body and more fields?

Thanks

Dan

Reply

I sort of do this with a comment system I built with this. I just give the divs different ID's like this:

<div class="feed-element" id="<%= dom_id(comment) %>">

I loop through all comments related to a project and any of them can be inline edited. I would think it should be similar to different fields maybe?

Reply

Thanks @spacerobotTR, ill give it a try.

Reply

Also found this for anyone trying to accomplish the same https://github.com/eelcoj/stimulus-inline-edit

Reply

Very cool. Thank you!

Reply

Instead of using create.js.erb and update.js.erb it would be nice to see a reactive programming example with Stimulus Reflex. This way you do not have to manage DOM elements yourself and thanks to WebSockets the update should be faster than AJAX

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 87,110+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.