jquery - 是否可以从不在 DOM 中的 HTML 代码创建 bootstrap 3 模式？

Question

我在变量(内存中)中有一个 bootstrap 3 modal 的 html，例如:

  var modalHTML = "<div class='modal'>...etc...</div>"

(想知道为什么？因为它是从 Handlebars.js 模板生成的)

我不想将那段 html 附加到 DOM，因为我必须关心重复的 id 等。

我想模态化那段 html。

在 Bootstrap 3 中，一种模式化方式如下:

 $("#foo").modal();

问题是:我可以模态化我的 html 吗？

当然我尝试过这个但不起作用:

 modalHTML.modal();

用真实代码编辑:

  var place = {...}
  var template = Handlebars.compile($("#place-modal-template").html());
  template(place).modal();

Answer 1

我将模态插入 DOM 的整个问题是:(引用 self 的问题)

I don't want to append that piece of html to the DOM, because I would have to care about repeated id's, etc, etc.

这最终不是问题(*)，所以我这样做了:

查看:

<script type="text/x-handlebars" id="place-modal-template">
    <div id="my-modal" (...)
</script>

<!-- Tthis is what I didn't wanted to have but ended up writing: -->
<div id="modal-container"></div>

代码:

var place = {...}
var template = Handlebars.compile($("#place-modal-template").html());

// Original intention was to not insert into DOM, like this:
// template(place).modal();
//
// But ended up doing this:

$("#modal-container").html(template(place));
$("#my-modal").modal();

(*) 这不是问题，因为我使用的是 .html(...) 而不是 $("#modal-container").append(...) >