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

标签 javascript qml

我有一些 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) 之类的东西,因此似乎无法获得实际内容。

这是一个错误,还是我遗漏了什么?

最佳答案

这个答案其实来自Jairo's comment ,如果模型可以是只读的并且您不需要动态模型更新,这是一个很好的解决方法。

解决方案基本上就是将 javascript 对象设置为 listview 模型,并通过 modelData 关键字访问委托(delegate)中的元素。

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': []}
            ]
    }
  }
}

关于javascript - 从 QML 中的 ListModel 访问 Javascript 数组元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27902910/

相关文章:

javascript - 带有切换的 jQuery 效果 .fadeTo()?

javascript - 菜单图标不显示在桌面版 Safari 中或根本不显示在移动设备上

XPath - 根据以下同级选择节点

Qt-Qml调试已启用。仅在安全环境下使用

javascript - AngularJS,UI 路由器 - 导航到 "foo/bar"转到 "foo"

javascript - 使用 Javascript 函数保存 Google Data Studio 报告

javascript - 如何根据属性合并数组中的对象

qt - 如何在 QML 中隐藏菜单项

javascript - 将 JavaScript 和 QML 集成在同一文件中

python - Qt5/PyQt5 : Custom QML components with QML frontend and Python backend