Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

$update not being triggered/called #160

Open
snaveevans opened this issue Sep 12, 2017 · 1 comment
Open

$update not being triggered/called #160

snaveevans opened this issue Sep 12, 2017 · 1 comment

Comments

@snaveevans
Copy link

snaveevans commented Sep 12, 2017

I was hoping that this code example would trigger the $update function but it does not. Notice that I'm using the variable found in $init and not querying for the element.
Would it be possible to add this?
Is this by design?

https://gist.github.com/snaveevans/2c1a03abc9cc75d8834e14c33f0c5a1a

@gliechtenstein
Copy link
Contributor

Yes that's by design.

Note that these variables on their own are literally just variables. So for example if you write:

var app = {
  $cell: true,
  $text: "app"
}

Cell uses this variable to construct the DOM, but it doesn't just magically re-assign the generated node into the variable app. Here's why it doesn't work this way:

The flexibility of Cell means you can write as many variables as you want but at the end of the day the only variable that gets turned into a node is the one with the $cell attribute set to true.

And these variables can utilize other variables to define themselves. For example:

var component = function (options) {
  return {
    $type: "a",
    href: options.url,
    _alert: function(t) { alert(t); },
    onclick: function(e) { this._alert(options.text); },
    $text: options.text
  }
}
var app = {
  $cell: true,
  $components: [{
    url: "https://www.google.com", text: "Google"
  }, {
    url: "https://www.twitter.com", text: "Twitter"
  }, {
    url: "https://www.github.com", text: "Github"
  }].map(component)
}

Now let's imagine for a moment what you were asking was possible. How would that work? If you try to call component._alert("hello");, what would that component be pointing to? (There are 3 nodes generated from the variable component).

This is why by design you can't use the original gene object to refer to the node. In fact if you do console.log on the variables, it will print out the same original variable, not the generated node.

To query the nodes, you should use document.querySelector or any other native DOM selection APIs and go from there.

That said, I do understand where you're coming from (there's gotta be a cleaner way than calling document.querySelector every time) and still thinking about ways to deal with this problem. If you have ideas please feel free to share.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants