Question

我刚刚开始研究QML，看起来很有希望，因为我非常喜欢C.在进行实验时，我遇到了一个需要使用Ajax请求从PHP服务更新ListModel的问题。我提到this链接，但我似乎无法使其工作。我的代码如下。

try.js：

function load() {
    listModel.clear();
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://<url>/service_newsletter.php?method=news", true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == xhr.DONE){
            if(xhr.status == 200) {
                var jsonData = JSON.parse(xhr.responseText);
                for(var index in jsonData.data.posts) {
                    listModel.append({
                        "text": jsonData.data.posts[index].text,
                        "description": jsonData.data.posts[index].description});
                    alert(jsonData.data.posts[index].text);
                }
            }
        }
    }
    xhr.send();
}

QML代码：

import QtQuick 1.1
import "try.js" as JS

Item {
    id:root
    width: 360
    height: 640

    Component.onCompleted: JS.load()

    ListModel {
        id:listModel
    }

    ListView {
        id:view
        anchors.fill:parent
        model : listModel
        delegate: Rectangle {
             width:parent.width
             height:80
             Text {
                anchors.centerIn:parent
                text: text
             }
        }
    }
}

注意：使用Necessitas在Android上部署Qt应用程序！

注2：我服务器的JSON数据格式与上面示例链接中给出的格式类似。

Answer 1

我几乎成功了。唯一的问题是，如果关于模型已经有1个元素，当我们做append时，它将有2个元素，但只有第1个元素会被重绘。可能我会错过文档中的内容。

Ninja，我建议你避免命名角色的方式与委托属性的命名方式相同，因为text: text可能会有效，但在text: "a"+text中，第二个text将被引用到第一个{ {1}}当您期望引用模型的角色名称时。

所以，更好的代码是

main.qml

text

try.js

import QtQuick 2.1
import "try.js" as JS

Rectangle {
    id:root
    width: 640 
    height: 480

    ListModel {
        id:listModel
        ListElement { title: "a" }
    }

    ListView {
        id:view
        width: 600
        height: 500
        model : listModel
        orientation: ListView.Vertical

        delegate: Rectangle {
             width: 100
             height: 20
             color: "yellow"
             Text {
                text: title
                color: "black"
             }
             Component.onCompleted: console.log("rectangle created ", title, index);
        }
    }
    Component.onCompleted: JS.load()
}

QML ListModel无法更新

1 个答案: