Question

我一直遇到一些骨干问题所以决定做一个非常简单的教程。

在完成这项工作后，我试图简化它，但现在无法使其正常工作。

我认为问题在于将视图返回到屏幕..

这是代码

var Theater = {
Models: {},
Collections: {},
Views: {},
Templates:{}
}

Theater.Models.Movie = Backbone.Model.extend({})

Theater.Collections.Movies = Backbone.Collection.extend({
model: Theater.Models.Movie,
url: "scripts/data/movies.json",
initialize: function(){
    console.log("Movies initialize")
}
});

Theater.Templates.movies = _.template($("#tmplt-Movie").html())

Theater.Views.Movies = Backbone.View.extend({
el: $("#mainContainer"),
template: Theater.Templates.movies,
//collection: new Theater.Collections.Movies(), //Not needed

initialize: function () {
    _.bindAll(this, "render");
    this.collection.bind("reset", this.render, this);
},

render: function () {
    $(this.el).append(this.template(this.collection.toJSON())) ;
}

})


Theater.Router = Backbone.Router.extend({
routes: {
    "": "defaultRoute" 
},

defaultRoute: function () {
    Theater.movies = new Theater.Collections.Movies()
    new Theater.Views.Movies({ collection: Theater.movies }); 
    Theater.movies.fetch();
}
})

var appRouter = new Theater.Router();
Backbone.history.start();

这是非常基本的html

   <div id="mainContainer"></div>

<script type="text/template" id="tmplt-Movie">

    <div><%=name %> </div>

</script>

感谢

Answer 1

this.collection.toJSON())会将collection转换为json，因此尝试在模板中访问name将不会为您提供任何内容。

您可以像这样编写render方法：

render : function() {
  var _view = this;
  this.collection.each(function(model) {
    $(_view.el).append(_view.template(model.toJSON())); // assuming model has 'name' attribute which is accessed in the template code
  });
}

这应该有用。

Answer 2

您的模板不正确

template: Theater.Templates.movies,

在渲染功能中使用

var template = _.template( $("#tmplt-Movie").html(), this.collection.toJSON() );
this.$el.html( template );

试试吧。如果失败了。尝试使用某个控制台进行日志检查以检查是否正在调用fetch，正在填充集合并且正在调用该渲染。如果正在调用渲染，那么只需要纠正一个可能与dom选择有关的小错误。

Answer 3

您似乎想要为模板提供一个集合，并且模板应循环遍历集合并显示值。您可以为模板提供集合，但这可能不是最佳方式。

主要问题似乎是您正在使用您应该使用模型的集合。在渲染功能中，您将集合传递给模板。该模板应该采用Models Json。

这是可以使用子视图的地方。因此，您需要一个采用集合的主视图，主视图将调用将接受模型的子视图。

我确实在jsFiddle.net上提供了一个例子。这有点像黑客。我没有将集合传递到模板中，而是从集合中传递了一个单独的项目。这只会渲染1个模型。由于路由可能会令人困惑，我继续将其删除。 Example on jsFiddle.net。我有时会遇到IE和jsFiddle.net的问题。我建议使用Chrome浏览器。

this.$el.append(this.template(this.collection.at(0).toJSON()));

就在这个月，我开始在Backbone.js上创建更简单的教程。此教程列表位于此页面的底部： More Simple Backbone.js Examples

希望很快，我将有时间创建一个关于渲染收集的简单教程。

这是完整的代码

<div id="mainContainer"></div>

var Theater = {
    Models: {},
    Collections: {},
    Views: {},
    Templates: {}
};

Theater.Models.Movie = Backbone.Model.extend({});

Theater.Collections.Movies = Backbone.Collection.extend({
    model: Theater.Models.Movie,
    //url: "scripts/data/movies.json",
    initialize: function() {
        console.log("Movies initialize")
    }
});

Theater.Templates.movies = _.template($("#tmplt-Movie").html());

Theater.Views.Movies = Backbone.View.extend({
    el: $("#mainContainer"),
    template: Theater.Templates.movies,
    //collection: new Theater.Collections.Movies(), //Not needed
    initialize: function() {
        _.bindAll(this, "render");
        this.collection.bind("reset", this.render, this);
    },
    render: function() {
        this.$el.append(this.template(this.collection.at(0).toJSON()));
    }
});


var movies = new Theater.Collections.Movies();

var movieView = new Theater.Views.Movies({ collection: movies });

var myMovies =
[{
    "Id": "BVwi1",
    "Name": "Bag It",
    "AverageRating": 4.6,
    "ReleaseYear": 2010,
    "Url": "http://www.netflix.com/Movie/Bag_It/70153545",
    "Rating": "NR"
},
{
    "Id": "BW1Ss",
    "Name": "Lost Boy: The Next Chapter",
    "AverageRating": 4.6,
    "ReleaseYear": 2009,
    "Url": "http://www.netflix.com/Movie/Lost_Boy_The_Next_Chapter/70171826",
    "Rating": "NR"
}];

movies.reset(myMovies);

我希望这有帮助。

骨干数据视图未显示

3 个答案: