从 QML 中的 ListModel 访问 Javascript 数组元素

Question

我有一些 javascript 数据，其中包含一个包含其他对象和数组的对象列表，并将其附加到 ListModel。

如（假设数据是在别处生成的，我想避开它的结构）：

import QtQuick 2.0

Rectangle {
  width: 600
  height: 300

  ListView {
    anchors.fill: parent

    model: ListModel {
      id: listModel
    }

    delegate: Text {
      text: 'key: '+ key + ', subdict["subkey1"]: ' + subdict.subkey1 +
            ', sublist.count: '+ sublist.count + ', sublist[0]: '+ sublist[0] +
            ', sublist.get(0): '+ sublist.get(0)
      wrapMode: Text.WordWrap
      width: parent.width
      color: index % 2 == 0 ? "darkgreen" : "brown"
   }

   Component.onCompleted: {
    var values = [
                   {'key': 'foo1', 'subdict': {'subkey1': 'subfoo1', 'subkey2': 'subbar1'},
                    'sublist': ['subvalue1', 'subvalue2']},
                   {'key': 'foo2', 'subdict': {'subkey1': 'subfoo2', 'subkey2': 'subbar2'},
                    'sublist': ['subvalue3', 'subvalue4', 'subvalue5']},
                   {'key': 'foo3', 'subdict': {'subkey1': 'subfoo3', 'subkey2': 'subbar4'},
                    'sublist': []}
                 ]

    for (var i in values)
      listModel.append(values[i]);
   }
  }
}

大多数部分工作正常，但我找不到访问 sublist 元素的方法。我所能得到的只是它们的数量，因为它们实际上是一个新的 ListModel，但由于我不能使用诸如 sublist.get(0) 之类的东西，因此似乎无法获得实际内容。

这是一个错误，还是我遗漏了什么？

Answer 1

这个答案实际上来自，如果模型可以是只读的并且您不需要动态模型更新，这是一个很好的解决方法。

解决方案基本上就是将 javascript 对象设置为列表视图模型，并通过 modelData 关键字访问委托中的元素。

import QtQuick 2.0

Rectangle {
  width: 600
  height: 300

  ListView {
    anchors.fill: parent

    delegate: Text {
      text: 'key: '+ modelData.key + ', subdict["subkey1"]: ' + modelData.subdict.subkey1 +
            ', sublist.length: '+ modelData.sublist.length + ', sublist[0]: '+ modelData.sublist[0] +
            ', sublist: ['+ modelData.sublist + ']'
      wrapMode: Text.WordWrap
      width: parent.width
      color: index % 2 == 0 ? "darkgreen" : "brown"
   }

   Component.onCompleted: {
    model = [
              {'key': 'foo1', 'subdict': {'subkey1': 'subfoo1', 'subkey2': 'subbar1'},
              'sublist': ['subvalue1', 'subvalue2']},
              {'key': 'foo2', 'subdict': {'subkey1': 'subfoo2', 'subkey2': 'subbar2'},
              'sublist': ['subvalue3', 'subvalue4', 'subvalue5']},
              {'key': 'foo3', 'subdict': {'subkey1': 'subfoo3', 'subkey2': 'subbar4'},
              'sublist': []}
            ]
    }
  }
}

从 QML 中的 ListModel 访问 Javascript 数组元素

Access to Javascript array elements from ListModel in QML

javascript

qml