Javascript 使用主干动态生成模态？

因此，我目前有一个主干模型，用于构建到名为cards的模板中的项目。 当我点击卡片模板时，我有一个引导模式下拉列表，显示卡片信息。然而，我用了一种非常粗糙的方式来做这件事，因为卡片只显示了大概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>

也许你可以试试这个

尝试将引导设置为具有空模型的主干视图
单击按钮时，复制当前视图的模型属性
将属性设置为该引导视图的模型
我将模型中的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>


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