Javascript 主干形式的嵌套模型列表

我有一个多对一的关系，我正试图用我无法工作的主干形式来建模

其思想是，有许多foo连接到单个条上。关键是每个酒吧必须至少有一个foo。我希望能够有一个单一的表单，您可以在其中创建一个酒吧，并尽可能多的食物，你想要的是附加到该酒吧。主干表单列表将是完美的，不幸的是，我不知道如何用嵌套模型实现它

---

谢谢。

我以前从未使用过主干表单。但是如果我想在不使用这个插件的情况下实现它，我会这样做

我将有2个模型和2个系列

型号

• 酒吧
• 福

收藏

• 栅栏
• 福斯

我在Bar模型中有一个parse方法，为每个模型创建一个Foo集合

视图

• MainView（在条形图集合中传递）并渲染
• BarsListView（从在Bar集合中传递的MainView创建）
• 条形图（传入条形图模型）
• 傻瓜视图（传入Foo集合）
• FooView（传入Foo模型）

这句话的意思是。。这只是一个粗略的例子

// Models
var Foo = Backbone.Model.extend({});
var Foos = Backbone.Collection.extend({
    model : Foo
});
// Collections
var Bar = Backbone.Model.extend({
    initialize: function() {
        if(typeof this.foos === 'undefined') {
             this.foos = new Foos();
        }
    },
    // Parse method that will attach the 
    // foo list if available to the Bar Model
     parse: function(resp) {
        // Storing the collecting direcly on the Model
        this.foos = new Foos(resp.hobbies || null);
        delete resp.hobbies;
        return resp;
    }
});

var Bars = Backbone.Collection.extend({
    model : Bar
});

//Views
var FooView = Backbone.View.extend({
    tagName: 'li',
    className : 'foo',
    template: _.template($('#foo-template').html()),
    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
        return this;
    }
});

var FooListView = Backbone.View.extend({
    template: _.template($('#foo-list-template').html()),
    initialize: function() {
        this.listenTo(this.collection, 'add', this.renderFooView);
        this.listenTo(this.collection, 'reset', this.render);
    },
    events:{
        'click .add-foo' : 'addFoo'
    },
    addFoo: function() {
        var newFoo = new Foo({
            hobby : $('.foo-name', this.$el).val()
        });  
        this.collection.add(newFoo);
    },
    renderFooView: function(foo) {
        var fooView = new FooView({
            model : foo
        });
        $('.foo-list', this.$el).append(fooView.el);
        fooView.render();
    },
    render: function() {
        var thisView = this;
        this.$el.empty();
        this.$el.append(this.template);
        _.each(this.collection.models, function(foo) {
             thisView.renderFooView(foo); 
        });
        return this;
    }
});

// Bar View
var BarView = Backbone.View.extend({
    className: 'bar',
    template: _.template($('#bar-template').html()),
    renderFooListView: function() {
        var fooListView = new FooListView({
            el: $('.foo-container', this.$el),
            collection : this.model.foos
        });
        fooListView.render();
    },
    render: function() {
        this.$el.append(this.template(this.model.toJSON()));
        this.renderFooListView();
        return this;
    }
});
// Bar List View
var BarListView = Backbone.View.extend({
    template: _.template($('#bar-list-template').html()),
    initialize: function() {
        // Events on collection which will trigger the methods
        this.listenTo(this.collection, 'add', this.renderBarView);
        this.listenTo(this.collection, 'reset', this.render);
    },
    events: {
        'click .add-bar' : 'addBar'
    },
    // Add a new Bar
    addBar: function() {
        var newBar = new Bar({
            name : $('.bar-name', this.$el).val(),
            age : $('.bar-age', this.$el).val()
        });  
        this.collection.add(newBar);
    },
    // Render BarView for each Model in Bars Collection
    renderBarView: function(bar) {
        var barView = new BarView({
            model : bar
        });
        $('.bar-container').append(barView.el);
        barView.render();
    },
    render: function() {
        var thisView = this;
        this.$el.empty();
        this.$el.append(this.template);
        _.each(this.collection.models, function(bar) {
             thisView.renderBarView(bar); 
        });
        return this;
    }
});
// Main View
// Renders the BarListView 
var MainView = Backbone.View.extend({
    el : $('.main'),
    renderBarListView: function() {
        var barListView = new BarListView({
            collection : this.collection
        });
        this.$el.append(barListView.el);
        barListView.render();
    },
    render: function() {
        this.$el.empty();
        this.renderBarListView();
        return this;
    }
});

// Initial obj
var obj = [{ 
    "name" : "Brad", 
    "age": 15,
    "hobbies" : [{"hobby":"play"}, {"hobby": "eat"}]
},{
    "name" : "Micheal", 
    "age": 22,
    "hobbies" : [{"hobby":"sit"}, {"hobby": "walk"}]
}];

// Bars collection and rendering of Main view
var bars = new Bars(obj, {parse : true});
var mainView = new MainView({
    collection : bars
});
mainView.render();

---

这是一个非常好的回答，苏珊特，我开始悬赏以奖励你的工作。@Xeoncross。。谢谢：）。我最近开始使用主干网，我知道当你开始使用主干网的时候，它可能会让你感到压力过大。因此，我发布了一个冗长的sol，以便它可以帮助某人。