$update not being triggered/called

[snaveevans]

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]

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.