javascript - 主干 View 不显示

Question

我正在使用在 YouTube 上找到的教程来学习 Backbone。我在渲染主干 View 时遇到了问题。我的 html 文件看起来像这样，我没有收到错误，但 TweetsView 没有显示:

这是一个表单，这部分的工作原理如下:

    <form id="new-tweet">
        <label>Author</label><input type="text" id="author-name" name="author-name"/>
        <label>Status</label><input type="text" id="status-update" name="status-update"/>
        <button>Post</button>
    </form> 
    <hr/>

然后我添加了以下 div 来放入所有假推文:

    <div id="tweets-container"></div>

我添加了3个依赖库:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/lib/underscore.min.js"></script>
    <script type="text/javascript" src="scripts/lib/backbone.min.js"></script>

Tweet 和 TweetsList 确实有效，我已将它们与 .toJSON() 一起使用；成功返回对象:

(function($){
            //use model to define a Bean
            var Tweet=Backbone.Model.extend({
            //pass some defaults in,just in case
                defaults:function()
                {
                    return {
                        //author:'jdorsey',
                        //status:'And on the eighth day god started learning web design using twitter like applications'
                        author:'',
                        status:''
                    }
                }
            });


            //a group of model-objects collected together
            var TweetsList=Backbone.Collection.extend({
            //all the models in the collection are of type Tweet
            model:Tweet
        });

这些 View 似乎不起作用:

        //In Backbone Views are more like Controllers...they allow us to render stuff on the screen...in order to create a view first create a template
        //this View represents a single tweet
        //creating a new view to use a template:    
        var TweetView=Backbone.View.extend({
            model:new Tweet(),
            tagName:'div'/*generating a new DOM element for each tweet*/,
            initialize:function(){
                this.template=_.template($('#tweet-template').html());
            },
            render:function(){
                //replace the place-holders in the template with the attributes from the model...and the content is going to be 
                //inserted into the element representing this template...
                this.$el.html(this.template(this.model.toJSON()));//bind the model to the template...
                return this;//default implementation        
            }
        });
        var tweets=new TweetsList();
        var TweetsView=Backbone.View.extend({
            model:tweets,
            el:$('#tweets-container'),
            initialize:function(){
                this.model.on('add',this.render,this);//pass the context in as the third argument...
            },
            render:function(){
                var self=this;
                _.each(this.model.toArray(),function(i){
                    self.$el.html('');
                    self.$el.append(new TweetView({model:tweet}).render().$el);
                    return this;
                });
            }
        }); 

页面加载完成后执行:

        $(document).ready(function(){
            $('#new-tweet').submit(function(ev){
                var tweet=new Tweet({author:$('#author-name').val(),status:$('#status-update').val()});
                tweets.add(tweet);
                //.length gives you number of models
                //.models is an array that holds all the models
                //.first(n) only gives you the first n models
                //.toJSON converts it and gives a regular JS object as the output...to convert to JSON,use JSON.stringify 
                console.log(tweets.toJSON());
                return false;
            });
            var appView=new TweetsView();
        });
     })(jQuery);

这是我正在使用的模板:

    <!-- Use the same names as inside the model in between the less than percent equal and percent greater than-->
    <!-- You can put the template anywhere in your HTML but using a script tag is a best practice,if you put it elsewhere,the browser might try to render it often and something stupid might happen -->
    <script type="text/template" id="tweet-template">
    <span class="author"><%= author %>:</span>
    <span class="status-update"><%= status %>:</span>
    </script>

Answer 1

我发现了一些问题。

首先，TweetView 有这一行:

model:new Tweet(),

删除该行。它创建了 Tweet 模型的新实例，您不希望在 TweetView 类的定义中执行此操作。 (稍后在 TweetsView.render 中创建 TweetView 的每个实例时，您可以直接提供模型实例。)

其次，在 TweetsView.render 的 _.each block 中，您有以下行:

self.$el.html('');

将该行移至 _.each 循环之前。该行会清除 TweetsView 的全部内容，您不希望在渲染每一行的循环内执行此操作。

第三，在同一个 _.each block 中，您将创建一个 TweetView 的新实例，并向其传递一个 model 选项:

self.$el.append(new TweetView({model:tweet}).render().$el);

将 model 选项的值从 tweet 更改为 i，这是 _ 当前迭代的模型实例.each。 (我不知道这里的 tweet 是什么；很惊讶您没有收到语法错误，但也许它是在未显示的文件部分中定义的。)

最后，同样在 _.each block 中，将 return this; 行移至 _ 结束之后。 every block ，因此它是 render 函数本身的 return 语句。 (_.each block 中不需要 return。)

我认为 render 函数应该如下所示:

        render:function(){
            var self=this;
            self.$el.html('');
            _.each(this.model.toArray(),function(i){
                self.$el.append(new TweetView({model:tweet}).render().$el);
            });
            return this;
        }

看看这些更改后是否有效。