به زودی: JavaScript برای توسعه دهندگان ریل

    (…)

    Now you got a super basic editor working that is not much better than running `data:text/html, ` in your browser. The content on load is static and any change made is lost when you refresh the page.

    ## 3.3.1 Passing data to a Stimulus controller

    Stimulus has the values API that allows to pass data to the controller from the HTML. Like a lot of things in Rails, Stimulus also follows certain conventions. You can pass values, like strings, integers and hash and array-objects using the following syntax: `data-[controllerName]-[valueName]-value=""`.

    Then in the controller you define it using the `static values` object, like this:

    ```

javascript
    import { Controller } from "@hotwired/stimulus"
    import { basicSetup } from "codemirror"
    import { EditorView } from "@codemirror/view"

    export default class extends Controller {
        static values = { content: String }

    // …
    }


    ```

    ### Static class field in JavaScript

    Wait… “static values object”? You can compare the *static class field* to Ruby's class methods (`self.` or `⁠class << self`). It defines methods that belong to the class itself rather than instances of the class.

    In Ruby:

    ```

javascript
    class Example
    def self.class_method
        "It me!"
    end
    end

    Example.class_method # => "It me!"


    ```

    In JavaScript:

    ```

javascript
    class Example {
    static classMethod() {
        return "It me!"
    }
    }

    Example.classMethod() // "It me!"


    ```


    Both look pretty much alike, right? As an aside: in a later chapter, I will dive deeper into JavaScript classes.


    Stimulus adds some extras to it too; “hey, these properties should be available across all instances of this controller (not just the current instance). Oh… also I want you to automatically create methods to get/set these values.”

    So with the above added `static values = {}` line, you automatically get:

    1. Getters, like ⁠`this.contenValue`;
    2. Setters, like ⁠`this.contenValue = 42`;
    3. Has-methods, like ⁠`this.hasContentVale`.

    (…)

    ### Fat-arrow functions

    But before continuing, there is some interesting, and often confusing, JavaScript tomfoolery going on here that trips up many Ruby developers:

    ```

javascript
    EditorView.updateListener.of((update) => {
    // …
    })


    ```

    What you see here is called a (fat) arrow function `() => {}`. It was introduced in ES6/ES2015. In Ruby you can compare it to the  ⁠`->` (lambda) syntax, but with the added benefit of a lexical `this` binding. Lexical-what? It will automatically keep `this` pointing to where it was defined. Before ES6/ES2015, you had to add `bind(this)`. Let's change the above code to use the post-ES6 syntax to check it out:

    ```

javascript
    // …
    connect() {
        this.editor = new EditorView({
        doc: this.contentValue,
        parent: this.element,
        extensions: [
            basicSetup,
            // EditorView.updateListener.of((update) => {
                        // if (update.docChanged) { this.#update() }
                    // })
            EditorView.updateListener.of(function(update) {
            if (update.docChanged) { this.#update() }
            }.bind(this))
            ]
        })
        }
    // …


    ```

    When making changes in the editor you will still notice the console output with `Update` logs. Let's now remove `bind(this)` and try updating the editor's content again.

    ```

javascript
    // …
        connect() {
        this.editor = new EditorView({
        doc: this.contentValue,
        parent: this.element,
        extensions: [
            basicSetup,
            // EditorView.updateListener.of((update) => {
                        // if (update.docChanged) { this.#update() }
                    // })
            EditorView.updateListener.of(function(update) {
            if (update.docChanged) { this.#update() }
            })
        ]
        })
        }
    // …


    ```

    Errors! If you use a modern editor, you might already see a warning: `#update is declared but its value is never read`.

    Without using `bind(this)` or the (fat) arrow function, `this` would be the CodeMirror editor's context/scope because that is what is calling the function. So `this.#update` fails: CodeMirror doesn't have an `#update` method, only the *editor_controller* does. Compared to Ruby it is akin to losing the `self` reference inside a block.

    (…)