백본으로 동적으로 모달을 생성 하시겠습니까?

Question

그래서 저는 카드라는 템플릿에 내장 된 항목에 대한 백본 모델을 가지고 있습니다. 카드 템플릿을 클릭하면 카드 정보를 표시하는 부트 스트랩 모달 드롭 다운이 나타납니다. 그러나 카드는 항목 모델 속성의 1/3 정도만 표시하고 속성의 2/3은 숨겨져 있기 때문에 나는 정말 해커 같은 방식으로이 작업을 수행하고 있습니다. 부트 스트랩 모달을 생성하기 위해 카드, 심지어 숨겨진 것들로부터 모든 항목 모달 속성을 가져 와서 jQuery를 사용하여 모달을 채 웁니다. 그러나 이것이 바람직한 코드보다 적지 만 그렇지 않으면 어떻게해야하는지 잘 모르겠습니다.

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

당신이 볼 수 있듯이, 나는 항목 모델 카드에서 하나의 물건을 잡아 모달에서 그들을 설정 해요 :

이

자바 스크립트 코드입니다. 이것은 모달

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

:

이

는 아이템 카드 템플릿입니다

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

Answer 1

속성을.

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

사용자가 요소를 클릭하면 click 이벤트에서 요소가 "this"로 전달되어 쉽게 특성을 가져올 수 있습니다. 그런 다음 템플릿을 사용하여 모달을 생성하고 속성 값을 사용하여 컬렉션에서 가져온 모델을 전달할 수 있습니다.

Answer 2

은 어쩌면 당신은 설정이

1. 시도를 시도 할 수 부트 스트랩 백본의보기로 빈 모델이있는 경우
2. 버튼을 클릭하면 모델을 현재보기의 공물
3. 세트 나는 당신이 클릭 이벤트를 부착하는 요소에 속성으로 모델에서 ID를 저장하는 것 그 부트 스트랩 뷰의 모델