1

In Javascript, you often need to provide context to a function by passing calling .bind(this) before passing it on.

I appreciate that in Brython things work a bit differently. But I'm wondering if there is something behind the scenes that provides a this type context that is accessible?

Specifically, I'm looking to convert the following cell.js example to Brython

<html>
<script src="https://cdn.jsdelivr.net/gh/lesichkovm/cell@1.5.0/cell.js"></script>
<script>
var el = {
  $cell: true,
  style: "font-family: Helvetica; font-size: 14px;",
  $components: [
    {
      $type: "input",
      type: "text",
      placeholder: "Type something and press enter",
      style: "width: 100%; outline:none; padding: 5px;",
      $init: function(e) { this.focus() },
      onkeyup: function(e) {
        if (e.keyCode === 13) {
          document.querySelector("#list")._add(this.value);
          this.value = "";
        }
      }
    },
    {
      $type: "ol",
      id: "list",
      _items: [],
      $components: [],
      _add: function(val) { this._items.push(val) },
      $update: function() {
        this.$components = this._items.map(function(item) {
          return { $type: "li", $text: item }
        })
      }
    }
  ]
}
</script>
</html>

Prior to being called, each function is bound to the relevant element.

The following is the Brython code, but as you can see there is no equivalent of 'this'.

<html>
<body onload="brython()">
    <script src="https://cdn.jsdelivr.net/gh/lesichkovm/cell@1.9.0/cell.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.10.0/brython.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.10.0/brython_stdlib.js"></script>

    <script type="text/python">
        from browser import window, document

        def init():
            print('init')
            #this.focus()
        def onkeyup(e):
            print('onkeyup')
            #if e.keyCode == 13:
            #    document["list"]._add(this.value);
            #    this.value = "";
        def add(val):
            print('add')
            #this._items.append(val)
        def update():
            print('update')
            #this.$components = map(lambda item: {'$item': 'li', '$text': item}, this._items)

        window.dispatchEvent(window.CustomEvent.new('cell-render', {'detail': {
            '$cell': True,
            'style': "font-family: Helvetica; font-size: 14px;",
            '$components': [{
                '$type': "input",
                'type': "text",
                'placeholder': "Type something and press enter",
                'style': "width: 100%; outline:none; padding: 5px;",
                '$init': init,
                'onkeyup': onkeyup,
            }, {
                '$type': "ol",
                'id': "list",
                '_items': [],
                '$components': [],
                '_add': add,
                '$update': update,
            }]
        }}))
    </script>
</body>
</html>
Rebs
  • 4,169
  • 2
  • 30
  • 34

1 Answers1

2

Looks like I just found my answer in the documentation.

javascript.this()

Returns the Brython object matching the value of the Javascript object this. It may be useful when using Javascript frameworks, eg when a callback function uses the value of this.
The module also allows using objects defined by the Javascript language. Please refer to the documentation of these objects.
Rebs
  • 4,169
  • 2
  • 30
  • 34