动态生成模态与骨干？

所以我现在有一个内置到名为模板的项目的骨干模型。当我点击卡片模板时，我有一个引导模式下拉显示卡片信息。不过，我这样做的方式非常不方便，因为卡片只显示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

动态生成模态与骨干？

回答

相关问题