0

So I currently have a backbone model for items that are built into a template called cards. When I click on a card template, I have a bootstrap modal drop down displaying the card info. However, I'm doing this in a really hacky way since the card only displays maybe 1/3 of the item model properties, and then 2/3 of the properties are hidden. To generate the bootstrap modal, I grab all the item modal properties from the card, even the hidden ones, and I populate the modal using jQuery. However, this leads to less than desirable code, but I'm not sure how to do it otherwise?

This is javascript code:

$(".event").click(function(){
                var eventProperties = $(this).children("div:first");
                var eventTitle = $(eventProperties).find("#template-title").children().html();
                var eventDescription = $(eventProperties).find("#template-otherItems").children("p:first").html();
                $('#eventModal').find("#modal-Title").html(eventTitle);
                $('#eventModal').find("#modal-Description").html(eventDescription);
                $('#eventModal').modal('toggle')
            });

As you can see, I'm grabbing stuff one by one from the item model card and setting them in the modal.

This is the item card template:

<script id="eventTemplate" type="text/x-handlebars">
        <div>
            <img src="blah.jpg">
            <div id="template-title">
                <h4 {{title}}</h4>
            </div>
            <div id="template-attendees">
                <p >{{attendeeNumber}} 
                    <span">Attendees</span>
                </p>
            </div>
            <div style="display: none" id="template-otherItems">
                <p>{{description}}</p>
                {{#each attendeePhotos}}
                <p>{{this}}</p>
                {{/each}}
                <p>{{tags}}</p>
                <p>{{creator_id}}</p>
                <p>{{date}}</p>
            </div>
        </div>
    </script>

This is the modal:

<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 id="modal-Title">{{title}}</h4>
                </div>
                <div class="modal-body">
                    <img src="http://the-digital-reader.com/wp-content/uploads/2013/10/Calvin-Hobbes-calvin-26-hobbes-254155_1024_7681.jpg" style="width:300px; height:225px;">
                    <p id="modal-Type">TYPE: </p>
                    <p id="modal-Description"> {{description}} </p>
                </div>
                <div class="modal-footer">
                    <div align="left">
                        <p id="modal-Attendees"> People attending</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <div>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

2 Answers 2

0

I'd store the id from the model as an attribute to the element you are attaching the click event to.

<script id="eventTemplate" type="text/x-handlebars">
    <div clickId="{{_id}}">
        <img src="blah.jpg">
        <div id="template-title">
            <h4 {{title}}</h4>
        </div>
        <div id="template-attendees">
            <p >{{attendeeNumber}} 
                <span">Attendees</span>
            </p>
        </div>
        <div style="display: none" id="template-otherItems">
            <p>{{description}}</p>
            {{#each attendeePhotos}}
            <p>{{this}}</p>
            {{/each}}
            <p>{{tags}}</p>
            <p>{{creator_id}}</p>
            <p>{{date}}</p>
        </div>
    </div>
</script>

Then when the user clicks the element, the click event will pass you the element as "this" and you can easily grab the attribute. Then you can generate your modal using a template and passing in the model that you grabbed from your collection using the attribute value.

0

Maybe you can try this

  1. Try to set that Bootstrap as a Backbone's View with empty model
  2. When click the button, copy the model attributes of current view
  3. Set attributes to that Bootstrap view's model

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.