The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Using The Reef JavaScript Library "store" Feature With HTML Buttons

TL;DR

I'm trying to get html `

This is what I have so far, but it's not working. It looks like I can't get to the datastore object.

TODO: Pull subtitle into page object

First Attempt That Didn't Work

The first thing I tried was using "store" instead of "signal". The docs introduce "store" as a signal that you can only update via function calls that are defined when you make it. I couldn't get it to work with the button clicks.

I'm not entirely sure what was going on. While I like the idea of issolating things a little via the funcitons none of the work I'm doing requires that. So, signals it is.

script_start_default_section script_end_default_section

Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Using The Reef JavaScript Library "store"
Feature With HTML Buttons

-- tldr/

I'm trying to get html `<button>`html` elements
to work with Reef's^reef^^ "store" functionality. 

This is what I have so far, but it's not working.
It looks like I can't get to the datastore object. 

-- /tldr

-- h3

First Attempt That Didn't Work

The first thing I tried was using "store" instead of "signal". 
The docs introduce "store" as a signal that you can 
only update via function calls that are defined when you 
make it. I couldn't get it to work with the button clicks.

I'm not entirely sure what was going on. While I like the
idea of issolating things a little via the funcitons
none of the work I'm doing requires that. So, signals it
is.


-- script/
-- show

const initStore = () => {
  console.log("init")

  let {store, component} = reef

  let datastore = store({
      letter: "asdf"
    }, 
    {
      switchLetter (datastore, event) {
        let newLetter = event.target.dataset.letter
        console.log(newLetter)
        console.log(datastore)
        datastore.letter = "wwwwwwww"
      }
    }
  )

  function template () {
    // let {letter} = datastore;
    console.log(datastore)
	  return `${datastore.letter}`;
  }


  buttons.addEventListener(
    "click", 
    (event) => {datastore.switchLetter(event)}
  )

  component('#theLetter', template);

}

// document.addEventListener("DOMContentLoaded", initStore)

-- /script





-- notes

- I've got the "signal" feature working with buttons.
There's an example on this page (TODO: Add link TKTKTK). 


-- categories
-- Reef 
-- JavaScript 

-- groups

-- metadata
-- date: 2023-10-17 13:12:53
-- id: 2wtrzdrc
-- site: aws
-- type: post
-- status: draft