0

我在骨干方面遇到了一些问题，所以决定做一个非常简单的教程。

在完成这项工作后，我尝试对其进行简化，但现在无法使其正常工作。

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

这是代码

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>

谢谢

4

3 回答 3

2

this.collection.toJSON())转换collection为 a 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
  });
}

这应该有效。

于 2012-12-06T11:39:28.323 回答
0

您的模板不正确

template: Theater.Templates.movies,

在渲染函数中使用

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

试试看。如果失败。尝试一些控制台记录以检查是否正在调用 fetch、正在填充集合以及正在调用渲染。如果调用了 render ，那么只需纠正一个可能与 dom 选择有关的小错误。

于 2012-12-06T11:30:36.703 回答
0

似乎您想为模板提供一个集合，并且模板应该遍历集合并呈现值。您可以为模板提供集合，但这可能不是最好的方法。

主要问题似乎是您在应该使用模型的地方使用了一个集合。在渲染函数中，您将一个集合传递给模板。该模板应采用 Models Json。

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

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

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

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

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

这是完整的代码

<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);

我希望这会有所帮助。

于 2012-12-06T16:22:42.297 回答