-2

我正在尝试将内容加载到页面而不向我收费，可能是视图问题，因为如果我工作，模型会获得数据。骨干js不太了解，我正在寻找使用JSON示例在网站上显示内容。

请问你能帮帮我吗？

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

        $(function() {  

            var Article = Backbone.Model.extend();

            var ArticleList = Backbone.Collection.extend({
                model: Article,
                url: 'https://support.mozilla.org/en/search?topics=hot&a=1&w=1&format=json&callback=?',
                parse: function(response) {
                    return response.results;
                }
            });               


            var articleView = Backbone.View.extend({
                initialize: function(){
                    this.render();
                },
                render: function(){                        
                    var tmpl = _.template( $("#articleTemplate").html(), {} );
                    var html = template.tmpl(this.model.toJSON());                       
                    this.$el.html( html );
                }
            });


            var articles = new ArticleList();

            var articlesView = new articleView({model: articles});

            articles.fetch();

            articles.bind('reset', function() {                   
               articlesView.render();
            });                

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


    <script id="articleTemplate" type="text/template">

        <div class="results">
            <div class="search_summary">
                <%= search_summary %>
            </div>
        </div>

    </script>
</body>

4

1 回答 1

0

您的代码中有几个错误。请参阅下面（工作）代码中的注释：

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

    $(function() {  

        var Article = Backbone.Model.extend();

        var ArticleList = Backbone.Collection.extend({
            model: Article,
            url: 'https://support.mozilla.org/en/search?topics=hot&a=1&w=1&format=json&callback=?',
            parse: function(response) {
                return response.results;
            }
        });               


        var articleView = Backbone.View.extend({
            initialize: function(){
               // You haven't fetched your collection yet. So don't render. 
               //this.render();
            },
            render: function(){                        
                // Underscore.js template assumes data is sent into _.template(...)
                // You store a Collection of Models in this.model. Hence, wrap the Collection json into one json "results" attribute.
                var html = _.template( $("#articleTemplate").html(), {results: this.model.toJSON()} );
                //var html = template.tmpl(this.model.toJSON());                       
                this.$el.html( html );
                return this;
            }
        });


        var articles = new ArticleList();

        var articlesView = new articleView({model: articles});


        // Bind to the reset event before fetching. Fetch will raise "reset" event.
        // The render function should return this, and hence, you can use $el and append it to #articles.
        articles.bind('reset', function() {                   
           $("#articles").append(articlesView.render().$el);
        }); 

        // everything is wired up. Now fetch, will will start a chain reaction, i.e. render the view, and append to #articles
        articles.fetch();               

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


<script id="articleTemplate" type="text/template">

    <div class="results">
        <div class="search_summary">
            <ul>
            <% _.each(results, function(res) { %> <li><%= res.search_summary %></li> <% }); %>
            </ul>
        </div>
    </div>

</script>
</body>
</html>
于 2013-01-31T04:38:48.360 回答