在MVC模式

时间:2016-04-21 06:03:55

标签: javascript ajax model-view-controller jsonp

我是javascript的MVC新手,我正在尝试使用名为Model,View和Data的不同类来实现MVC。我也在我的模型类中使用ajax调用调用jsonp数据但是由于对jsonp的ajax调用是异步的,我无法将我的模型类对象传递给View,我试图使用this链接同步调用jsonp。 #34; NNNNNN"但无法理解在哪里放哪个代码.. 请帮忙。

模特课:

function Model()
{
    CountryName=[];
    CapitalName=[];
    SeqID=[];
    GeoPt=[];
    TelPref=[];
    isoN=[];
    CountryInfo=[];
}
Model.prototype.setData= function()
{

    function doMyAjaxCalls(callbackFunc) {
        var url='http://www.geognos.com/api/en/countries/info/all.jsonp';
        $.ajax({
            type: 'GET',
            url: url,
            async: false,
            jsonpCallback: 'callback',
            contentType: "application/json",
            dataType: 'jsonp',
            success: function(json) 
            {  
                callbackFunc(json);
            },
            error: function(e) 
            {
                console.log(e.message);
            }
        }); 
    }

    doMyAjaxCalls(function(json) {
    var arr=[];
                document.getElementById("header").innerHTML="<tr><td> StatusMsg: "+json.StatusMsg+"</td><td> StatusCode: "+json.StatusCode+"</td><tr>";
                $.each(json.Results, function(i, object) {
                    $.each(object, function(property, value) {
                    if(property=="Capital")
                    {
                        if(value==null)
                        {
                            arr.push("-");
                        }
                        else
                        {
                            $.each(value, function(subproperty, subvalue) {
                            if(subproperty=="Name")
                                arr.push(subvalue);
                            });
                        }

                    }
                    else if(property=="CountryCodes")
                    {
                        if(value==null)
                        {
                            arr.push("-");
                        }
                        else
                        {
                            $.each(value, function(subproperty, subvalue) {
                            if(subproperty=="isoN")
                                arr.push(subvalue);
                            });
                        }

                    }
                    else
                        arr.push(value);
                    });
                    CountryName.push(arr[0]);
                    CapitalName.push(arr[1]);
                    SeqID.push(arr[3]);
                    GeoPt.push(arr[4]);
                    TelPref.push(arr[5]);
                    isoN.push(arr[6]);
                    CountryInfo.push(arr[7]);
                    arr=[];
                });
});
}

控制器类:

function Controller () {
        return this;
    };
    Controller.prototype.load = function () {
        var model = new Model();
        model.setData();
        var view = new View(model);
        view.show();
    };

查看课程:

function View(model) 
{
    this.model = model;
    _this=this.model;
    return this;
};
View.prototype.show = function () 
{
    counter=1;
    for(var i=0;i<241;i++)
    {
        document.getElementById("mainTable").innerHTML+="<tr><td>"+counter+"</td><td>"+_this.CapitalName[i]+"</td><td>"+this.model.CapitalName[i]+"</td><td>"+this.model.SeqID[i]+"</td><td>"+this.model.GeoPt[i]+"</td><td>"+this.model.TelPref[i]+"</td><td>"+this.model.isoN[i]+"</td><td>"+this.model.CountryInfo[i]+"</td><td><input type=\"button\" value=\"edit\"></input></td><tr>";
        counter++
    }
}

它在View类

中出错
  

View.js:12 Uncaught TypeError:无法读取属性&#39; 0&#39;未定义的

0 个答案:

没有答案