如何从backbone.js中的用户中获取特定模型的数据

我有一个列表视图，该列表视图显示了来自API的某些内容，并沿着一个按钮显示，当单击时应从另一个页面上的列表视图中显示相应项目的详细信息，将按钮与特定ID相关联，以及如何提出接受这些ID以相应路由的通用URL。我看到了许多类似的帖子，但我不知道如何路由或不了解该路线上的每个模型。这是我当前的应用程序，在这里我尚未概括每个按钮与第一个ID和诸如/1之类的路由关联的路由，该路由将其带到视图，以显示仅收藏集中的第一个元素的详细信息。

pollsscript.js

//defining the model
var QuestionModel = Backbone.Model.extend({
    // urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
    url : "http://localhost:8000/polls/api/v1/question/",
    model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({
    el: '.page',
    render : function(){
        var context = {};
        this.questionCollection = new QuestionCollection();
        this.questionCollection.fetch({
            success: () => {
                  context['models'] = this.questionCollection.toJSON();
                  var template = _.template($('#question-list-template').html(),{});
                  this.$el.html(template(context));
             }
        })
        return this;
    }
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
    el: '.page',
    render : function(){
        var context = {};
        this.questionCollection = new QuestionCollection();
        this.questionCollection.fetch({
            success: () => {
                  context['model'] = this.questionCollection.get(1).toJSON();
                  var template = _.template($('#question-detail-template').html(),{});
                  this.$el.html(template(context));
             }
        })
        return this;
    }
});

var questionListView = new QuestionListView();
var questionDetailsView = new QuestionDetailsView();
var PageRouter = Backbone.Router.extend({
    routes: {
        '' : 'home',
        '1' : 'details',
    },
    home : function(){
        questionListView.render();
    },
    details: function(){
        questionDetailsView.render();
    },
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();

index.html

<html>
<head>
    <title> </title>
</head>
<body>
    <div class="container">
        <h1>All polls</h1>
        <div class="page"></div>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
    <script type="text/template" id="question-list-template">
        <table class = "table table-striped">
            <thead>
                <tr>
                    <th>Question</th>
                    <!-- <th>Date Published</th> -->
                    <th>Votes</th>
                    <th>Popular responses</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <% _.each(models, function(model){ %>
                    <tr>
                        <td><%= model.question_text %></td>
                        <!-- <td><%= model.pub_date%></td> -->
                        <td><%= model.total_votes%></td>
                        <td><%= model.pop_response%></td>
                        <td><a href="#/1" class="btn btn-info">Show details</a></td>
                    </tr>
                    <% }); %>
                </tr>
            </tbody>
        </table>
    </script>
    <script type="text/template" id="question-detail-template">
        <div>
            <div><%= model.question_text %><div/>
            <div>
                <% _.each(model.choices, function(choices){ %>
                    <div><%= choices.choice_text %></div>
                    <div><%= choices.votes %></div>
            <% }); %>
            </div>
        </div>
    </script>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
    <script type="text/javascript" src="backbone-min.js"></script>
    <script type="text/javascript" src="pollsscript.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>

index.html

<html>
<head>
    <title> </title>
</head>
<body>
    <div class="container">
        <h1>All polls</h1>
        <div class="page"></div>
    </div>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- main page template -->
    <script type="text/template" id="question-list-template">
        <table class = "table table-striped">
            <thead>
                <tr>
                    <!-- <th> ID </th> -->
                    <th>Question</th>
                    <th>Votes</th>
                    <th>Popular responses</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <% _.each(models, function(model){ %>
                    <tr>
                        <!-- <td id="id"><%= model.id %></td> -->
                        <td><%= model.question_text %></td>
                        <td><%= model.total_votes%></td>
                        <td><%= model.pop_response%></td>
                        <td><a href="#<%= model.id %>" class="btn btn-info show-details">Show details</button></td>
                        <!-- <td><a href="#<%= model.id %>" class="btn btn-info show-details" data-id="<%= model.id %>">Show details</button></td> -->
                    </tr>
                    <% }); %>
                </tr>
            </tbody>
        </table>
    </script>
    <script type="text/template" id="question-detail-template">
        <div>
            <div><%= model.question_text %><div/>
            <div>
                <% _.each(model.choices, function(choices){ %>
                    <div><%= choices.choice_text %></div>
                    <div><%= choices.votes %></div>
            <% }); %>
            </div>
        </div>
    </script>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="underscore-min.js"></script>
    <script type="text/javascript" src="backbone-min.js"></script>
    <script type="text/javascript" src="pollsscript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</script>
</body>
</html>

pollsscript.js

//defining the model
var QuestionModel = Backbone.Model.extend({
    // urlRoot : "http://localhost:8000/polls/api/v1/question/",
});
//defining collection
var QuestionCollection = Backbone.Collection.extend({
    url : "http://localhost:8000/polls/api/v1/question/",
    model: QuestionModel
});
//list view of all the questions
var QuestionListView = Backbone.View.extend({   
    el: '.page',
    template : _.template($('#question-list-template').html()),
    render : function(){    
        var context = {};
        this.questionCollection = new QuestionCollection();
        this.questionCollection.fetch({
            success: () => {
                  context['models'] = this.questionCollection.toJSON();
                  this.$el.html(this.template(context));
             }
        })
        return this;
    },
    // events: {
    //  'click .show-details' : 'viewDetails',
    // },
    // viewDetails : function(e){
    //  var id = $(e.currentTarget).data("id");
    //  var item = this.questionCollection.get(id);
    //  var questionDetailsView = new QuestionDetailsView({
    //      model: item
    //  });
    //  questionDetailsView.render(); //get and pass model here 
    // }
});
//individual questions
var QuestionDetailsView = Backbone.View.extend({
    el: '.page',
    template : _.template($('#question-detail-template').html()),
    render : function(){
        var context = {};
        context['model'] = this.model.toJSON();
        this.$el.html(this.template(context));
        return this;
    }
});
var PageRouter = Backbone.Router.extend({
    routes: {
        '' : 'home',
        ':id' : 'details'
    },
    home : function(){
        var questionListView = new QuestionListView();
        questionListView.render();
    },
    details : function(id){
        //alert(id);
        var context = {};
        this.questionCollection = new QuestionCollection();
        this.questionCollection.fetch({
            success: () => {
            var item = this.questionCollection.get(id);
            var questionDetailsView = new QuestionDetailsView({
            model: item
            });
            questionDetailsView.render();
            }
        })
    }
});
//initializing router and setting up history for routing to work
var pageRouter = new PageRouter();
Backbone.history.start();

我尝试了一下，稍后，我将数据ID与按钮相关联并给了模型。ID我从API中获取，然后在单击时获得ID，然后传递该模型以在详细信息视图上渲染。

仍然不会在路由器中改变路由器，因此仍在寻找更好的方法。

编辑更新了代码并通过将模型ID与HREF相关联，并创建了从路由器函数中获取和获取模型的路由。

相关内容

最新更新

热门标签：