需要使用骨干在codeigniter的视图中显示结果json文件

时间:2016-01-04 06:10:08

标签: json codeigniter backbone.js

我的API函数是。

function student_GET() {
    $response = $this->viewList();
    $this->response($response);
}

function viewList() {
     $this->load->model('model_student');
     $response = $this->model_student->getStudents();
     return $response;
}

我的模特是,

function getStudents() {
    $sql= "SELECT * FROM students;
    $query = $this->db->query($sql);
    if ($query->num_rows() > 0) {
        return $query->result();
    } else {
    return NULL;
    }
}

API工作正常,结果json数据为

[
  {
    "id": "5",
    "subject": "English",
    "score": "93",
    "name": "john"
  },
  {
    "id": "9",
    "subject": "Maths",
    "score": "75",
    "name": "jack"
   }
]

我需要使用backbone.js在视图中显示这些结果详细信息。请帮助..

2 个答案:

答案 0 :(得分:0)

这是一个适用于主干和任何JS库的示例: “结果”是来自请求的数据

success: function(results) {
   for (var i = 0; i < results.length; i++) {
            var tempData=[];
                        tempData[0] = results[i].get('subject');
                        tempData[1] = results[i].get('score');
                        tempData[2] = results[i].get('name');
                        tempData[3] = results[i].get('id');
                       // or tempData[4] = results[i].id;
  }
}

我做了另一个例子,一个从json文件获取数据的骨干模型: http://tennis.parseapp.com/

以防我删除此主机,文件如下。 的index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
        <script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
        <script>

            $(function() {
                var Profile = Backbone.Model.extend();

                var ProfileList = Backbone.Collection.extend({
                    model: Profile,
                    url: 'profiles.json'
                });   

                var ProfileView = Backbone.View.extend({
                    el: "#profiles",
                    template: _.template($('#profileTemplate').html()),
                    render: function(eventName) {
                        _.each(this.model.models, function(profile){
                            var profileTemplate = this.template(profile.toJSON());
                            $(this.el).append(profileTemplate);
                        }, this);

                        return this;
                    }
                });

                var profiles = new ProfileList();    
                var profilesView = new ProfileView({model: profiles});
                profiles.fetch({
                    success: function() {
                        profilesView.render();
                    }
                });

            });
        </script>
        <title>Fortified Studio</title>
    </head>
    <body>
        <div id="profiles"></div>


        <script id="profileTemplate" type="text/template">
            <div class="profile" style="margin-bottom: 21px;">
                <div class="info">
                    <div class="name">
                        <%= name %>
                    </div>
                    <div class="title">
                        <%= title %>
                    </div>
                    <div class="background">
                        <%= background %>
                    </div>
                </div>
            </div>

        </script>
    </body>
</html>

profiles.json:

[
    {
        "name": "Tim Cook",
        "title": "CEO",
        "background": "Tim Cook is the CEO of Apple and serves on its Board of Directors."  
    },
    {
        "name": "Angela Ahrendts",
        "title": "Senior Vice President of retail and online stores",
        "background": "Angela Ahrendts is Apple's senior vice president of retail and online stores, reporting to CEO Tim Cook."
    },
    {
        "name": "Eddy Cue",
        "title": "Senior Vice President of Internet Software and Services",
        "background": "Eddy Cue is Apple's senior vice president of Internet Software and Services, reporting to CEO Tim Cook."
    },
    {
        "name": "Craig Federighi",
        "title": "Senior Vice President of Software Engineering",
        "background": "Craig Federighi is Apple's senior vice president of Software Engineering, reporting to CEO Tim Cook."
    },
    {
        "name": "Jonathan Ive",
        "title": "Senior Vice President of Design",
        "background": "London-born designer Jonathan Ive is Apple's senior vice president of Design, reporting to CEO Tim Cook. "
    }
]

答案 1 :(得分:0)

需要使用集合和模型在视图中显示json值