如何从backbone.js中提供给用户的集合列表中获取特定模型的数据？

时间：2017-12-06 11:14:53

标签： backbone.js models

我有一个列表视图，显示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>

1 个答案:

答案 0 :(得分：0)

<强>的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();

我尝试了这个，后来，我将data-id与按钮相关联并给出了我从api获取的model.id然后在点击时获得了id，然后传递模型以在详细视图上呈现。

仍然无论如何都不会改变路由器，所以仍然在寻找更好的方法。

修改 更新了代码并通过将模型ID与href相关联来修复，并创建了路径来获取并从路由器函数中获取模型。

相关问题
最新问题