Por lo tanto, actualmente tengo un modelo de red troncal para elementos integrados en una plantilla llamada tarjetas. Cuando hago clic en una plantilla de tarjeta, tengo un menú desplegable modal de arranque que muestra la información de la tarjeta. Sin embargo, estoy haciendo esto de una manera realmente hacky ya que la tarjeta solo muestra quizás 1/3 de las propiedades del modelo del artículo, y luego 2/3 de las propiedades están ocultas. Para generar el modal de arranque, tomo todas las propiedades modales del elemento de la tarjeta, incluso las ocultas, y relleno el modal usando jQuery. Sin embargo, esto lleva a un código menos que deseable, pero no estoy seguro de cómo hacerlo.

Este es el código javascript:

$(".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')
            });

Como puede ver, estoy agarrando cosas una por una de la tarjeta de modelo del artículo y configurándolas en el modal.

Esta es la plantilla de tarjeta de artículo:

<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>

Este es el 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>
0
user3340037 30 ago. 2014 a las 08:30

2 respuestas

La mejor respuesta

Almacenaría la identificación del modelo como un atributo del elemento al que está adjuntando el evento de clic.

<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>

Luego, cuando el usuario hace clic en el elemento, el evento de clic le pasará el elemento como "esto" y podrá obtener fácilmente el atributo. Luego puede generar su modal usando una plantilla y pasando el modelo que tomó de su colección usando el valor del atributo.

0
Kalpers 30 ago. 2014 a las 15:12

Quizás puedas probar esto

  1. Intente configurar ese Bootstrap como una Vista de Backbone con un modelo vacío
  2. Cuando haga clic en el botón, copie los atributos del modelo de la vista actual
  3. Establecer atributos para el modelo de esa vista Bootstrap
0
user3630767 30 ago. 2014 a las 14:41