1

I'm not sure if this is possible as I'm pretty noob to web. So basically what I want to do is, iterate through an array, and for each element in an array, populate the backbone view with the appropriate information. What I thought I could do, is have this template declared in my .cshtml:

<div id="template-sample-validation-error">
    <form id="sample-validation-form" class="form">
                <div id="sampleName" class="control-label">Sample Name:</div>
        </form>
</div>

(there's actually more fields in the actual template, but I didn't include them all).

So with that template, I thought I could have a view bind to that template and append a new template for each item in the collection. The problem is, since the ids are not unique, in my initialize method of my backbone view, I can't grab unique items:

// some of the backbone view
SampleValidationView = (function() {
    return Backbone.View.extend({
        initialize: function (sample) {
            var sampleMessage = sample.get('sampleName');

// iterating and creating a SampleValidationView to render
_.each(samples, function (aView) {                
            var errorView = new SampleValidationView(aView);
            this.$('#template-sample-validation-error').append(errorView.render().$el);
        });

Then I found this post, which basically adds a number to the div to make the div unique.
Create Dynamic div with unique IDs - jQuery

I wasn't sure how I would do something like this with the template that I created. I guess an alternative would be to do something similar as to what's done in the post, but I thought having a template for each view, and having each view just append to each other based on the number of items in the array would be cleaner. But I'm stuck. Any thoughts would be much appreciated. Thanks!

Community
  • 1
  • 1
Crystal
  • 28,460
  • 62
  • 219
  • 393

1 Answers1

1

If you are using underscore for your templates you could add <%= %> at the end of the id to append the id of the model or the object passed in. Ex:

<div id-"unique-id-<%= id %>">
    ...content
</div>

that would just put the id of the model or the object you passed into the template when you called _.template({id : 1}). This would give : 

<div id-"unique-id-1">
    ...content
</div>

What you should do instead of explicitly finding the #template-sample-validation-error with jquery, you should declare the el var of your view. This allows you to simply call this.$el. So maybe something like this:

// some of the backbone view
SampleValidationView = (function() {
    return Backbone.View.extend({

        el : '#template-sample-validation-error',
        template : _.template($('#template-sample-validation-error').html()),

        initialize: function (sample) {
            var sampleMessage = sample.get('sampleName');
        },

        render : function(){
            this.$el.html(this.template({id : 1})); // Some unique id

            // iterating and creating a SampleValidationView to render
            _.each(samples, function (aView) {                
                var errorView = new SampleValidationView(aView);
                this.$el.append(errorView.render().$el);
        }
    });
Shane
  • 165
  • 2
  • 9