0

我正在尝试将基本的 cell.js 演示转换为 Brython。我正在使用这个叉子，它可以在 Brython 中工作。

$components问题特别是在尝试更新$update函数时。

我可以打电话getattr(this, '$components')并看到一个空列表：[]。
但是分配更新的列表不会触发更新。

我创建了一个 jsfiddle演示来演示这一点。

万一小提琴下方的内联代码永远被删除。

原始 Javascript

<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>

布莱顿版

<html>
<head>
    <title>cell</title>
</head>
<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
        import javascript

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

        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

0 回答 0