動態生成模態與骨幹？

所以我現在有一個內置到名爲模板的項目的骨幹模型。當我點擊卡片模板時，我有一個引導模式下拉顯示卡片信息。不過，我這樣做的方式非常不方便，因爲卡片只顯示1/3的項目模型屬性，然後隱藏2/3的屬性。爲了生成引導模式，我從卡中獲取所有項目模態屬性，甚至隱藏起來，然後使用jQuery填充模式。然而，這導致代碼不太理想，但我不確定如何去做，否則呢？動態生成模態與骨幹？

這是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') 
      });

正如你所看到的，我通過一個從項目模卡抓的東西之一，在模式設置它們。

這是此項目卡片模板：

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

來源

2014-08-30 user3340037

我的ID從模型存儲爲您正在安裝的單擊事件到元素的屬性。

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

然後，當用戶點擊該元素，單擊事件將通過你的元素「本」，你可以輕鬆抓取的屬性。然後，您可以使用模板生成模態，並使用屬性值傳入從集合中抓取的模型。

來源

2014-08-30 15:06:47 Kalpers

也許你可以試試這個

嘗試設置引導爲骨幹的看法與空模型
當點擊按鈕，複製模型在當前視圖的貢品
套裝屬性到引導視圖模型

來源

2014-08-30 14:41:10 user3630767

動態生成模態與骨幹？

回答

相關問題