Question

因此，我目前拥有一个内置于名为卡片模板的项目的骨干模型。当我点击卡片模板时，我有一个引导模式下拉列表显示卡片信息。但是，我这样做的方式非常糟糕，因为卡片只显示项目模型属性的1/3，然后隐藏了2/3的属性。为了生成bootstrap模式，我从卡中获取所有项目模态属性，甚至是隐藏的属性，并使用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>

Answer 1

也许你可以试试这个

尝试将Bootstrap设置为带有空模型的Backbone＆＃39的视图
单击按钮时，复制当前视图的模型属性
将属性设置为该Bootstrap视图的模型

Answer 2

我将模型中的id作为属性存储到您将click事件附加到的元素。

<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”传递给您，您可以轻松获取该属性。然后，您可以使用模板生成模态，并使用属性值传入从集合中获取的模型。

用骨干动态生成模态？

2 个答案: