在Dojo中从Json创建动态页面

时间:2011-12-16 05:56:13

标签: javascript html json mobile dojo

我有一个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 mobile中创建动态页面。从上面的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并创建动态视图。代码//can you give some hint what should be here?

中的这一行可以替代什么

3 个答案:

答案 0 :(得分:1)

 load: function(response) {
        for (key in response.Introduction){
                    // creating each view heading and content here.........
                }

 and try to debug data for key it should be any object that you pass 3 obj in json...

答案 1 :(得分:1)

here each key has three property that you define in json,now u can inject values to html view
by accessing property like this key.title,key.toolbar....,ex:- $('<p>' + key.title + '</p>');

答案 2 :(得分:1)

首先,你是以错误的方式阅读json。 dojo.xhrPost会将数据发送到您在url参数中指定的url:不检索url参数中的文件。如果按照自己的方式进行操作,最终会出现“无法加载start.json状态: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);
                    }
                });
            }
        );