twitter-bootstrap - 带有模板内容的引导弹出框

Question

如何在引导弹出窗口中使用淘汰模板作为内容？

Answer 1

目前尚不清楚您在寻找什么。这是一个示例小提琴，希望对您有所帮助：

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

它展示了两个概念：

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

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

以下是您可以发送到 Popover的选项。

---

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

更新了 fiddle 以显示从呈现的模板中提取 html 内容。还要注意在弹出框初始化中使用 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>

​</p>

这是示例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/