javascript - 在 Dojo 中从 Json 创建动态页面

Question

我有一个json文件

{
    Introduction: 
    [
        {
            title:   "Introduction",
            toolbar: "Page 1",
            content: "cont, aabitant morbi tristique..."
        },
        {
            title:   "about",
            toolbar: "Page 2",
            content: "contesent vel nisi ipsum..."
        },
        {
            title:   "services",
            toolbar: "Page 3",
            content: "Cras adipiscing sapien nec..."
        }
    ]
}

我想在 Dojo 移动版中创建动态页面。从上面的 Json 中可以前后移动创建三个页面。我遇到了问题。我正在阅读 Json 作为:

  dojo.xhrPost({
        url: "start.json",
        handleAs: "json",
            var viewContainer = new dojox.mobile.ScrollableView({id:"viewContainer"});
        load: function(response) {
            for (key in response){
                        // creating each view heading and content here.........
                        //can you give some hint what should be here?
                    }
        }

我如何读取上面的 json 并创建动态 View 。代码中的这一行可以替换什么 //你能给出一些提示吗？

Answer 1

首先，您以错误的方式读取 json。dojo.xhrPost 会将数据发送到您在 url 参数中指定的 url:不会检索 url 参数中的文件。如果你按照你现在的方式去做，你最终会得到一个错误，比如“无法加载 start.json status:500”

因此，在您的情况下，要读取文件，您应该改为执行 dojo.xhrGet。

接下来，您的 viewContainer 变量不应像那样放置在参数的中间(您正在编写混合在对象属性中间的代码 (!!!))。

所以......你应该能够通过做这样的事情来完成你想要的:

require(["dojo/dom-construct", 
    "dojo/_base/xhr", 
    "dojox/mobile/parser", 
    "dojox/mobile", 
    "dojox/mobile/ScrollableView", 
    "dojox/mobile/Heading"],
            function(domConstruct) {

                dojo.xhrGet({
                    url : 'start.json',
                    handleAs : "json",
                    load : function(response) {

                        dojo.forEach(response.Introduction, function(page){
                            var node = domConstruct.create("div", {id : page.title}, "viewsContainer", "last");
                            var view = new dojox.mobile.ScrollableView({
                                id : page.title
                            }, node);
                            view.addChild(new dojox.mobile.Heading({label : page.title}));
                            view.startup();
                        });
                    },
                    error : function(err) {
                        console.debug("Error : ", err);
                    }
                });
            }
        );