1

I've checked this post, and this one, and this one , and numerous others and none of the solutions seem to help me at all. All I'm trying to do is replace the contents of a view with an array of html. Each element in the array is created by using the underscore templating engine. Here's my code:

The Template: 

    <script type="text/template" id="radioItemTemplate">
        <li>
            <div class="button price <% if(enabled){%>enabled<%}%>">$<%=price%></div>
            <div class="title name"><%=name%></div>
        </li>
    </script>

The Javascript: 

iHateThisView = Backbone.View.extend({
    template: _.template($("#radioItemTemplate").html()),

    events:{
        "click .price": "_onRadioItemClick"
    },

    radioItems: null,
    radioItem: null,

    initialize: function (options) {
        this.radioItems = options.radioItems;
        this.radioItem = options.radioItem;
    },

    render: function () {
        trace("rendering");
        var radioItems = this.radioItems.first(3);
        var activeRadioItem = this.radioItem.get('name');
        var result = [];
        var scope = this;
        _.forEach(radioItems, function (radioItem) {
            var option = {
                name: radioItem.get('name'),
                price: radioItem.get('price'),
                enabled: activeRadioItem == radioItem.get('name')
            };
            result.push(scope.template(option));
        });

        //THE TRICKY ZONE -START

        this.$el.html(result);

        //THE TRICKY ZONE -END
        return this;
    },

    _onRadioItemClick: function (event) {
        $el = this.$el;
        var clickedName = $el.find('price');
        console.log('clickedName');
    }
});

Aside from it wrapping my html with a <div> this does exactly what I want on the first render. However if I called my render function again, none of the events work. So based on all my readings, I figured this.delegateEvents() should fix the loss of events, so I tried this:

//THE TRICKY ZONE -START

this.$el.html(result);
this.delegateEvents();

//THE TRICKY ZONE -END

Which from what I can tell did nothing. On the first render when I click on the radioItems I'd get my console.log, but again not after a re-render

so then I read that I might have to do this:

//THE TRICKY ZONE -START

this.$el.html(result);
this.delegateEvents(this.events);

//THE TRICKY ZONE -END

Which also did nothing.

So then I tried a different method:

//THE TRICKY ZONE -START

this.setElement(result);
this.delegateEvents();   //with and without this line

//THE TRICKY ZONE -END

This added only the first item in the array, and the events didn't work even on the first render.

Please restore my sanity guys, I don't what else to do.

Community
  • 1
  • 1
vvMINOvv
  • 1,768
  • 4
  • 22
  • 45
  • I don't think you can do this.$el.html(result) directly if result is an array. Try concatenating the all the html in the result array and then updating the dom. – Pramod Oct 04 '13 at 01:49
  • @Pramod thank's, it works acutally, but you're right it's better to `.join()` them I'll edit the question – vvMINOvv Oct 04 '13 at 01:52
  • I'm not sure what you mean "first render" and "re-render", is it something like this http://jsfiddle.net/ambiguous/LvuGF/ ? – mu is too short Oct 04 '13 at 01:54
  • @muistooshort that's EXACTLY what I'm doing!! how come yours work? This is crazy.... anyways I cleaned it up a bit http://jsfiddle.net/LvuGF/2/ – vvMINOvv Oct 04 '13 at 02:07
  • @muistooshort I fixed it!! I have no idea why it works, but instead of calling the `this.delegateEvents()` I called it after the render call like so: `this.$el.find('someSelector').html(theAnnoyingView.render().el); theAnnoyingView.delgateEvents();` – vvMINOvv Oct 04 '13 at 02:14
  • @muistooshort Why is that any different to call it from outside? aren't I doing the same thing? – vvMINOvv Oct 04 '13 at 02:19
  • Do you just have [this problem](http://stackoverflow.com/q/12028835/479863) then? [My answer](http://stackoverflow.com/a/12029250/479863) to that question might clear things up. The `this.$el.find('someSelector').html(...)` could be killing off your event handling. – mu is too short Oct 04 '13 at 03:13
  • @muistooshort with the new perspective I recognize that issue is the same. Funny that I was studied that link the most, but I guess I didn't realize that. Thanks again for your help as always. You've saved my skin a couple of times already :D – vvMINOvv Oct 04 '13 at 03:37

0 Answers0