Alpine.js not reacting to data change

Question

In tinybind.js (which seems to be a dead project) setting: var view = tinybind.bind(app, data) results in the UI updating upon directly setting a global variable, with no special requirements. Is there an equivalent in Alpine.js (which seems a more popular maintained project)

I know you get use globalData, but I'm keen to remain as close to standard JS as possible.

Other frameworks and 'no require build' libraries can do this, it seems a shame Alpine can only really react inside its own component.

<!DOCTYPE html>
<html>
<head>
    <title>Tabbed Layout</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            align-items: center;
        }

        #app {
            height: 100vh;
            width: 600px;
            border: 2px solid #ccc;
            position: relative;
        }

        .tab-container {
            display: flex;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            display: flex;
        }

        .tab {
            flex: 1;
            text-align: center;
            text-transform: uppercase;
            padding: 10px;
            cursor: pointer;
            background-color: #ddd;
            border: 1px solid #ccc;
            transition: background-color 0.3s ease;
        }

        .tab:hover {
            background-color: #bbb;
        }

        .tab.active {
            background-color: #aaa;
        }

        .tab-content {
            display: none;
            position: absolute;
            width: 100%;
            text-align: center;
        } 

        .tab-content[x-show] {
            display: block;
        }
    </style>
</script>
</head>
<body x-data="data" :class="`${mode} ${theme}`">
    <div id="app">
        <div>
            <div id="content_tab1" class="tab-content" x-show="activeTab === 'tab1'">
                <div>Content for Tab 1</div>
            </div>
            <div id="content_tab2" class="tab-content" x-show="activeTab === 'tab2'">
                <div>Content for Tab 2</div>
            </div>
            <div id="content_tab3" class="tab-content" x-show="activeTab === 'tab3'">
                <div>Content for Tab 3</div>
            </div>
            <div id="content_tab4" class="tab-content" x-show="activeTab === 'tab4'">
                <div>Content for Tab 4</div>
            </div>
            <div class="tab-container">
                <div @click="activeTab = 'tab1'" class="tab" :class="{ active: activeTab === 'tab1' }">
                    <span>tab1</span>
                </div>
                <div @click="activeTab = 'tab2'" class="tab" :class="{ active: activeTab === 'tab2' }">
                    <span>tab2</span>
                </div>
                <div @click="activeTab = 'tab3'" class="tab" :class="{ active: activeTab === 'tab3' }">
                    <span>tab3</span>
                </div>
                <div @click="activeTab = 'tab4'" class="tab" :class="{ active: activeTab === 'tab4' }">
                    <span>tab4</span>
                </div>
            </div>
        </div>
     </div>
</body>
    <script>
        let data = {
            activeTab: 'tab1',
            mode: 'light',
            theme: 'blue',
        };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    <script>
        setTimeout(() => {
            data.activeTab = 'tab4'
        }, 500);
    </script>
</html>

I'm expecting to set something like the tinybind.js var view = tinybind.bind(app, data) and the UI update automatically when a the global var data is changed in vanilla JS.

Calvin Furano · Accepted Answer · 2023-10-20 16:00:11Z

The idiomatic way is to use the Alpine.data function to make your data reactive (if it's not defined inline with the x-data element.)

Here is an example of how you could make this work:

document.addEventListener("alpine:init", () => {
  Alpine.data('tabState', () => ({
    init() {
      setTimeout(() => {
        this.activeTab = 'tab4'
      }, 500);
    },

    activeTab: 'tab1',
    mode: 'light',
    theme: 'blue',
  }));
});

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  align-items: center;
}

#app {
  height: 100vh;
  width: 600px;
  border: 2px solid #ccc;
  position: relative;
}

.tab-container {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  background-color: #ddd;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}

.tab:hover {
  background-color: #bbb;
}

.tab.active {
  background-color: #aaa;
}

.tab-content {
  display: none;
  position: absolute;
  width: 100%;
  text-align: center;
}

.tab-content[x-show] {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
    <title>Tabbed Layout</title>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body :class="`${mode} ${theme}`">
    <div id="app" x-data="tabState">
        <div>
            <div id="content_tab1" class="tab-content" x-show="activeTab === 'tab1'">
                <div>Content for Tab 1</div>
            </div>
            <div id="content_tab2" class="tab-content" x-show="activeTab === 'tab2'">
                <div>Content for Tab 2</div>
            </div>
            <div id="content_tab3" class="tab-content" x-show="activeTab === 'tab3'">
                <div>Content for Tab 3</div>
            </div>
            <div id="content_tab4" class="tab-content" x-show="activeTab === 'tab4'">
                <div>Content for Tab 4</div>
            </div>
            <div class="tab-container">
                <div @click="activeTab = 'tab1'" class="tab" :class="{ active: activeTab === 'tab1' }">
                    <span>tab1</span>
                </div>
                <div @click="activeTab = 'tab2'" class="tab" :class="{ active: activeTab === 'tab2' }">
                    <span>tab2</span>
                </div>
                <div @click="activeTab = 'tab3'" class="tab" :class="{ active: activeTab === 'tab3' }">
                    <span>tab3</span>
                </div>
                <div @click="activeTab = 'tab4'" class="tab" :class="{ active: activeTab === 'tab4' }">
                    <span>tab4</span>
                </div>
            </div>
        </div>
     </div>
</body>
</html>

If you really want to use a plain JavaScript object, you can call Alpine.reactive instead.

document.addEventListener("alpine:init", () => {
  window.tabState = Alpine.reactive({
    activeTab: 'tab1',
    mode: 'light',
    theme: 'blue',
  });

  setTimeout(() => {
    tabState.activeTab = 'tab4'
  }, 500);
});

If you need to break out of the component space, the more idiomatic way is to use a global store instead.

Nige · Accepted Answer · 2023-10-20 16:29:08Z

0

Updated Calvin's code to this:

<script type="text/javascript">

    let tabState = {
        activeTab: 'tab1',
        mode: 'light',
        theme: 'blue',
    };

    // set tabState to be reactive
    document.addEventListener("alpine:init", () => {
        tabState = Alpine.reactive(tabState);
    })

    // test changing tabs
    let tabs = ['tab1', 'tab2', 'tab3', 'tab4'];
    setInterval(() => {
        let tab_index = tabs.indexOf(tabState.activeTab) + 1;
        if (tab_index > 3) tab_index = 0;
        tabState.activeTab = tabs[tab_index];
    }, 1000);
</script>

Looks to be working perfectly

answered Oct 20, 2023 at 16:29

Nige

431 silver badge6 bronze badges

Collectives™ on Stack Overflow

Alpine.js not reacting to data change

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related