1

在 Javascript 中，您通常需要通过在传递调用.bind(this)之前为函数提供上下文。

我很欣赏在 Brython 中的工作方式有所不同。但我想知道幕后是否有提供this可访问的类型上下文的东西？

具体来说，我希望将以下 cell.js 示例转换为 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>

在被调用之前，每个函数都绑定到相关元素。

以下是 Brython 代码，但正如您所见，没有“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>
4

1 回答 1

2

看起来我刚刚在文档中找到了答案。

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.
于 2021-10-18T05:18:01.453 回答