बैकबोन-फॉर्म

Question

में नेस्टेड मॉडल की सूची मेरे पास एक से अधिक रिश्तों हैं जो मैं बैकबोन-फॉर्म के साथ मॉडल करने की कोशिश कर रहा हूं जिसे मैं काम नहीं कर सकता।

विचार यह है कि एक ही बार से जुड़े कई फ़ूज़ हैं। पकड़ है हर बार कम से कम एक foo होना चाहिए। मैं एक ऐसा फॉर्म प्राप्त करने में सक्षम होना चाहता हूं जहां आप एक बार बना सकते हैं, और जितनी चाहें उतनी फूज जो उस बार से जुड़ी हैं। बैकबोन-फॉर्म सूची सही होगी, दुर्भाग्य से मुझे नहीं पता कि इसे नेस्टेड मॉडल के साथ कैसे कार्यान्वित किया जाए।

धन्यवाद।

Answer 1

मैंने पहले कभी बैकबोन-फॉर्म का उपयोग नहीं किया है। लेकिन अगर मैं इस प्लगइन का उपयोग किए बिना इसे कार्यान्वित करना चाहता हूं तो मैं इस तरह से जाऊंगा।

मेरे पास 2 मॉडल और 2 संग्रह होंगे।

मॉडल

• बार
• फू

संग्रह

• बार्स
• Foos

मैं में बार मॉडल एक पार्स विधि है कि प्रत्येक मॉडल के लिए एक फू संग्रह बनाता होगा।

दृश्य

• MainView (एक बार संग्रह में उत्तीर्ण) और गाया
• BarsListView (बनाया गया MainView बार संग्रह में पारित से)
• BarView (बार मॉडल में उत्तीर्ण)
• FooListView (फू संग्रह में उत्तीर्ण)
• FooView (फू मॉडल में उत्तीर्ण)

इन पंक्तियों में

कुछ .. यह सिर्फ एक किसी न किसी उदाहरण

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

Check Fiddle