Bootstrap popover包含来自模板的内容

Question

如何使用挖空模板作为引导程序弹出窗口中的内容？

Answer 1

目前还不清楚你在寻找什么。以下是我希望能提供帮助的小提琴：

http://jsfiddle.net/V3nVd/3/

它演示了两个概念：

1）使用自定义绑定添加所需的Popover属性

2）使用模板封装用于创建带有弹出窗口的按钮的HTML（包括自定义绑定）。

以下是您可以发送到Popover的options。

---

编辑：http://jsfiddle.net/V3nVd/7/

更新了小提示，以显示从渲染模板中提取html内容。另请注意在popover初始化中使用html选项。

Answer 2

如果我将文本绑定更改为绑定值，则表示未呈现该值，如果我选择带有jquery ID的元素并在控制台中打印其值，则该值正确但未显示。

<center>
  <h2>Popover Demo</h2>
  <div data-bind="template: {name: 'popoverTemplate', foreach: commands}"></div>
</center>

<script type="text/html" id="popoverTemplate">
    <div style="display:none;" data-bind="attr: {'id': $data.command + 'Content'}, template: {name: 'popoverContent', data: $data.content}"></div>    
    <a href="#" class="btn" data-bind='text: $data.command, popover: $data'></a>
</script>

<script type="text/html" id="popoverContent">
    <p>Name: <input type="text" data-bind='value: $data.name'></p>
    <p>Email: <b data-bind='text: $data.email'></b></p>
</script>

以下是示例http://jsfiddle.net/mounir/V3nVd/15/

由于

修改

这是一个完整的工作示例，我将ko.applyBindings()更改为ko.applyBindingsToDescendants以包含绑定上下文$ root和$ parent，当我们想要将按钮关联到例如根中的函数时视图模型。

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });

看看@JSFiddle http://jsfiddle.net/mounir/Mv3nP/4/