1

寻找让 Backbone 工作的绝对最小脚本。尝试将各种教程和示例拼凑在一起，但在让视图工作时遇到问题。没什么特别的，我现在就在浏览器中获取原始 json。只是一个基本的骨架，可以帮助连接点并在此基础上进行构建。我尝试了以下各种变化：

(function ($) {

    var model = Backbone.Model.extend({
        idAttribute: 'custId'
    });

    var collection = Backbone.Collection.extend({
        initialize: function(){
        },
        model: model,
        url: '/cust'
    });

    var view = Backbone.View.extend({
        initialize: function(){
            _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
            this.collection.bind("reset", this.render);

            this.render();
        },
        el: $('#content'),
        template: Handlebars.compile($("#contentTemplate").html()),
        render: function(){
            $(this.el).html( this.template(this.model.toJSON()));
        },
        tagName: "li"
    });

    var router = Backbone.Router.extend({
        initialize: function(){
            var newCollection = new collection;
            newCollection.fetch();
        },
        route: {
            "": "home"
        },
        home: function(){
            this.view = new view({collection: newCollection});
            $('#content').html(this.view.el);
        }
    });

    var app = new router();
}(jQuery))

谢谢。

4

1 回答 1

1

您在滥用该el属性。$('#content').html(this.view.el)将导致复制$('#content')自身内部的元素（因为 view.el 等于$('#content')）。

您应该尝试el从视图对象中删除该属性并让它自行生成。然后$('#content').html(this.view.el);应该工作。

另一个可能的问题是您将整个集合呈现在一个li元素中 - 这就是您想要的吗？最好的方法是让集合中的每个模型代表一个li标签，而集合代表一个ul标签。

其他问题：

  • 元素正在接收集合，view但您正在尝试渲染模型
  • 在路由器中，newCollection在 home 方法中无法访问
  • 你没有打电话Backbone.history.start()

这是我将如何重写代码：

var model = Backbone.Model.extend({
    idAttribute: 'custId'
});

var model_view = Backbone.View.extend({
    template: Handlebars.compile($("#modelTemplate").html()),
    tagName: 'li',
    initialize: function() {
        _.bindAll(this, 'render');
        this.render();
        this.on('change',this.render);
    },
    render: function() {
        $(this.el).html( this.template(this.model.toJSON()) );
        return this;
    }
});

var collection = Backbone.Collection.extend({
    initialize: function(){
    },
    model: model,
    url: '/cust'
});

var collection_view = Backbone.View.extend({
    tagName: "ul",
    initialize: function(){
        _.bindAll(this, 'render','renderModels');
        this.render();
        this.renderModels();
        this.collection.bind("reset", this.render);
        this.collection.bind("reset", this.renderModels);
    },
    render: function(){
        // just create the 'ul' tag; we will populate it with model view elements; a collection template is no longer needed
        return this;
    },
    renderModels: function() {
        this.collection.each(function(obj){
            var view = new model_view({
                model: obj
            });
            $(this.el).append(view.el);
        },this);
    }
});

var router = Backbone.Router.extend({
    initialize: function(){
        this.newCollection = new collection();
        this.newCollection.fetch();
    },
    route: {
        "": "home"
    },
    home: function(){
        this.view = new collection_view({collection: this.newCollection});
        $('#content').html(this.view.el); // #content should not be a 'ul' tag, the 'ul' is generated by the collection_view
    }
});

var app = new router();
Backbone.history.start();

确保相应地更新您的模板。

请原谅可能的错误，我无法测试代码，但我相信它指出了您应该使用的逻辑。

干杯!

于 2012-11-09T12:15:45.300 回答