I'm not faced with a technical challenge per se as I have some working code. I'm just not sure this is the right way to go so I'd like to run by some experts before I continue down this path...
I'm using the 'render' function from this post: https://stackoverflow.com/a/10136935/1480182
I then have two Backbone views:
DetailLineView = Backbone.View.extend({
initialize: function (options) {
this.options = options;
this.render();
},
render: function () {
var variables = { detailLine: this.options.detailLine };
this.$el.html(render("DetailLine", variables));
}
});
and
CustomerView = Backbone.View.extend({
initialize: function (options) {
this.options = options;
this.render();
},
render: function () {
var dl = "";
_.each(this.options.customer.attributes.detailLines, function (line) {
var v = { detailLine: line };
dl += render("DetailLine", v);
});
var variables = { customer: this.options.customer.attributes, detailLinesHtml: dl };
this.$el.html(render("Customer", variables));
}
});
and of course the corresponding templates.
Now the above code works but as far as I can tell I'm not actually using the DetailLineView.
I have a feeling that there's a (much?) more elegant way of doing this but I fail to see how... can anyone help out?
EDIT: A better(?) solution:
I changed my CustomerView to this:
CustomerView = Backbone.View.extend({
initialize: function (options) {
this.options = options;
},
render: function () {
var variables = { customer: this.options.customer.attributes };
this.$el.html(renderTemplate("Customer", variables));
var dlv = new DetailLineView({
el: $('.detailLinesContainer', this.$el),
detailLine: this.options.customer.attributes.detailLines[0]
});
dlv.render();
}
});
I like it better and I'm now using my DetailLineView...
