Skip to main content

Stimulus JS Twitter UI: Part 2 Discussion

General • Asked by Chris Oliver
Great content, as always.  An idea for another Stimulus screencast: reimplement
the 'Using VueJS for Nested Forms in Rails' series in Stimulus.

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!
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).

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.
+1, a Stimulus with ActionCable video would be great.

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. 

@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.


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

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

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?

Thanks @spacerobotTR, ill give it a try.


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

Very cool. Thank you!


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.