Javascript 在ListModel中传递数组

我想知道如何在ListModel中传递数组

好的，在QML中，我有一个ListView，我将其设置为ListModel，如下所示：

我可以使用以下命令附加到它：

myList.append({name:"terry", card:00100, books:["024589","865976","879582","215645"]}); 

但当我试图在屏幕上输出它时，我得到了这个

{
    "card": 00100
    "books": {
        "objectName": "",
        "count": 4,
        "dynamicRoles": false
     },
    "name": "terry",
    "name": "terry"
}

我不知道为什么我会有两个名字！我怎样才能得到书的价值呢

我查阅了的QML文档，找不到任何与传递数组相关的内容，所有示例都是整数或字符串

你知道我怎么才能知道日期吗？ 我确实通过使用Component.onCompleted:{}在委托中调用数组解决了这个问题，但我认为这不是一个好的/正确的方法，因为委托不负责保存数据，应该在模型中完成，如果我错了，请纠正我

谢谢你抽出时间

Edit01：谢谢你的回复，以下是我需要数组的原因： 我在委托中有一个组合框，如下所示：

如您所见，我将名称输入到Label id:nameID，并且我希望将书籍输入到具有模型的ComboBox id:booksID，如果我将books键设为liselement，如何输入所有值

---

在QML或文档中没有提到任何关于正确获取所有键值的内容？它只支持基于索引号的getint索引。

您做得不对。数组成员必须是ListElement：

---

你做错了。数组成员必须是ListElement：

---

你想要类似的东西吗：

Rectangle {

id: root
visible: true
width: 360
height: 360

ListModel
{
    id: myList
    ListElement {
           name: "Story"
           card: 3
           books: [
               ListElement { bookName: "Story 1" },
               ListElement { bookName: "Story 2" },
               ListElement { bookName: "Story 3" }
           ]
       }
       ListElement {
           name: "Novel"
           card: 3
           books: [
               ListElement { bookName: "Novel 1" },
               ListElement { bookName: "Novel 2" },
               ListElement { bookName: "Novel 3" }
           ]
       }
}


Component {
    id: displayDelegate
    Rectangle
        {
         id: rowID
         width: 300 //50
         height: 40
         color: "#323232"
         border.color: "white"
         Row
         {
             anchors.fill: parent
             anchors.leftMargin: 10
             anchors.rightMargin: 10
             Text{
                 id: nameID
                 text: name
                 font.pixelSize: 12
                 width: 50 //200
                 wrapMode: Text.WrapAnywhere
                 /*anchors.verticalCenter: parent.verticalCenter*/
                 color: "white"//"#999"
             }

             Text{
                 /*anchors.verticalCenter: parent.verticalCenter*/
                 text: "out:"
                 font.pixelSize: 12
                 color: "white"//"#999"
             }

             /*ComboBox{
                 id: booksID
                 height: 20
                 width: 50
                 model: books
                 anchors.verticalCenter: parent.verticalCenter
             }*/
             Repeater {
                 model: books
                 Text { text: bookName + "\t"; color: "white" }
             }
         }
    }
}

ListView {
    id: disp
    anchors.fill: parent
    model: myList
    delegate: displayDelegate
}

}

---

我已经修改了你们共享的几行代码。我不确定您的ComboBox实现。因此，我使用了自己的中继器实现。您可以尝试执行并检查结果。

是否需要类似的操作：

Rectangle {

id: root
visible: true
width: 360
height: 360

ListModel
{
    id: myList
    ListElement {
           name: "Story"
           card: 3
           books: [
               ListElement { bookName: "Story 1" },
               ListElement { bookName: "Story 2" },
               ListElement { bookName: "Story 3" }
           ]
       }
       ListElement {
           name: "Novel"
           card: 3
           books: [
               ListElement { bookName: "Novel 1" },
               ListElement { bookName: "Novel 2" },
               ListElement { bookName: "Novel 3" }
           ]
       }
}


Component {
    id: displayDelegate
    Rectangle
        {
         id: rowID
         width: 300 //50
         height: 40
         color: "#323232"
         border.color: "white"
         Row
         {
             anchors.fill: parent
             anchors.leftMargin: 10
             anchors.rightMargin: 10
             Text{
                 id: nameID
                 text: name
                 font.pixelSize: 12
                 width: 50 //200
                 wrapMode: Text.WrapAnywhere
                 /*anchors.verticalCenter: parent.verticalCenter*/
                 color: "white"//"#999"
             }

             Text{
                 /*anchors.verticalCenter: parent.verticalCenter*/
                 text: "out:"
                 font.pixelSize: 12
                 color: "white"//"#999"
             }

             /*ComboBox{
                 id: booksID
                 height: 20
                 width: 50
                 model: books
                 anchors.verticalCenter: parent.verticalCenter
             }*/
             Repeater {
                 model: books
                 Text { text: bookName + "\t"; color: "white" }
             }
         }
    }
}

ListView {
    id: disp
    anchors.fill: parent
    model: myList
    delegate: displayDelegate
}

}

---

我已经修改了你们共享的几行代码。我不确定您的ComboBox实现。因此，我使用了自己的中继器实现。您可以尝试执行并检查结果。

除了使用ListModel和ListElement之外，您还可以查看QSyncable JsonListModel QML类型。它是Ben Lau的开源组件，您可以在GitHub上找到它：

JsonListModel是一种专门的ListModel类型，可以处理您在QML中创建的JSON数组或从REST服务获取的JSON数组。它会自动将JSON同步到QML ListModel，因此使用起来非常方便：

ListView {
        id: listView
        anchors.fill: parent

        // property for json data, used as source for JsonListModel
        property var jsonData: []

        // use JsonListModel as model
        model: JsonListModel {
          source: listView.jsonData
          keyField: "id"
        }

        // delegate
        delegate: DelegateItem { /* ... */ }
}

---

您还可以在此处找到它的工作原理的全面指南：

作为使用ListModel和ListElement的替代方法，您还可以查看QSyncable JsonListModel QML类型。它是Ben Lau的开源组件，您可以在GitHub上找到它：

JsonListModel是一种专门的ListModel类型，可以处理您在QML中创建的JSON数组或从REST服务获取的JSON数组。它会自动将JSON同步到QML ListModel，因此使用起来非常方便：

ListView {
        id: listView
        anchors.fill: parent

        // property for json data, used as source for JsonListModel
        property var jsonData: []

        // use JsonListModel as model
        model: JsonListModel {
          source: listView.jsonData
          keyField: "id"
        }

        // delegate
        delegate: DelegateItem { /* ... */ }
}

---

您还可以在此处找到一个全面的工作指南：

快速查看文档，猜一猜，在模型中尝试books:[ListElement]。@T4rk1n我得到这个UiError:小部件创建失败，但当我使ListElement等于JSON时，对吗？这意味着我需要给它提供键和值，但数组听起来更简单、更直接。只是快速查看文档中的猜测，请尝试模型中的books:[ListElement]。@T4rk1n我得到这个UiError：小部件创建失败，但当我使ListElement等于JSON时，对吗？这意味着我需要给它提供键和值，但数组听起来更简单、更直接。是的，这非常有效。但这有点像dictionary/Json，带有键和值，假设我想将其用于委托中的ComboBox，如何在ComboBox模型中输入ListElement值？ListElement没有任何选项可以正确地给出所有键的值？我更新了我的答案，解释了如何在组合框中使用子模型。是的，这就是我要找的textRole，非常感谢：@s.m.Mousavi您如何使用append添加新元素？在SE上找到了答案。Ubuntu的所有位置：是的，这非常有效。但这有点像dictionary/Json，带有键和值，假设我想将其用于委托中的ComboBox，如何在ComboBox模型中输入ListElement值？ListElement没有任何选项可以正确设置所有键的值？我更新了答案，解释了如何在组合框中使用子模型。是的，这就是我要找的textRole，非常感谢：@s.m.Mousavi您如何使用append添加新元素？在SE上找到了答案。Ubuntu的所有位置：

ListView {
        id: listView
        anchors.fill: parent

        // property for json data, used as source for JsonListModel
        property var jsonData: []

        // use JsonListModel as model
        model: JsonListModel {
          source: listView.jsonData
          keyField: "id"
        }

        // delegate
        delegate: DelegateItem { /* ... */ }
}