$update do not gets executed automatically in window.setTimeout() about cell HOT 2 CLOSED

intercellular commented on June 10, 2024

$update do not gets executed automatically in window.setTimeout()

from cell.

Comments (2)

bytethinker commented on June 10, 2024 1

OK，thank you for writing up such a detailed reply!
Keep up the great idea!!

from cell.

gliechtenstein commented on June 10, 2024

Thanks for asking. This is probably the only gotcha when it comes to how contexts get resolved on Cell, so I'm happy to answer.

There's one thing to remember about how _ variables trigger the $update() function.

They need to be triggered inside a function that's directly attached on the element context. Let me explain what this means.

When you do:

$init: function(){
  this._items = [{tag: "aaaa"}];
}

That will trigger an $update() automatically.

However if you do

$init: function(){
  var self = this;
  setTimeout(function(){
    self._items = [{tag: "aaaa"}];
  }, 2000)
}

That won't trigger $update() because the mutation is happening inside the setTiemout's anonymous callback function (and this callback function doesn't exist on the element's context, it's just a parameter passed to setTimeout).

So to make this work, we need to make sure the mutation logic happens directly inside a function that's attached to the element context, like this:

$init: function(){
  var self = this;
  setTimeout(function() {
    self._refresh([{tag: 'aaaa'}]);
  },2000);
},
_refresh: function(items){
  this._items = items;
},

Note how we've created a separate _refresh function, and calling it from setTmeout. This time it works because the mutation this._items = items is happening inside the _refresh() function, which is directly tied to the element's context.

The End result:

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.celljs.org/cell.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script>
var GithubApp = {
  $cell: true,
  _items: [{tag:'bbbb'}],
  $init: function(){
    var self = this;
    window.setTimeout(function()
    {
      self._refresh([{tag: 'aaaa'}]);
    },2000);
  },
  _refresh: function(items){
    this._items = items;
  },
  _template: function(item){
    return {
      $components: [{
        $text: item.tag
      }]
    };
  },
  $update: function(){
    this.$components = this._items.map(this._template);
  }
}
</script>
</html>

Hope this makes sense, please let me know if you have further questions!

from cell.

$update do not gets executed automatically in window.setTimeout() about cell HOT 2 CLOSED

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent