引導酥料餅從模板

內容如何使用淘汰賽模板內容的引導酥料餅？引導酥料餅從模板

來源

2012-09-09 Roger Urscheler

[你嘗試過什麼？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – Kato

這不完全清楚你所尋找的。這裏是我希望能幫助一個樣本小提琴：

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

它演示了兩個概念：

1）使用自定義綁定添加所需酥料餅的屬性

2）使用模板封裝HTML（包括自定義綁定），用於創建帶有彈出式窗口的按鈕。

這裏是options您可以發送到酥料餅。

編輯：http://jsfiddle.net/V3nVd/7/

更新小提琴顯示來自呈現模板拉動HTML內容。還要注意在popover初始化中使用html選項。

來源

2012-09-09 21:08:04

謝謝，但不是我正在尋找的東西。在你的jsfiddle中，我希望在模板中定義popover的內容（即'Content One'）。我的popover會顯示我想在模板中定義的人員的詳細信息（例如姓名，電子郵件等）。我分叉你的jsfiddle顯示我正在嘗試做什麼。 http://jsfiddle.net/V3nVd/4/ –

我編輯了我的答案，添加了一個新的小提琴，它可以從Knockout呈現的另一個元素中提取內容。這並不完美，但顯示了總體思路。據我所知Knockout模板不能渲染到一個字符串（如jsrender），所以我不得不渲染一個隱藏的div，然後從中拉出字符串。不理想，因爲它最終會包含兩次內容。也許其中一位理解Knockout內部更好一點的人會有更好的想法。 –

同意你的看法，這不是理想的解決方案。但它的工作原理，直到我找到更好的答案，我會用這種方式。非常感謝！ –

如果我改變文字結合到一個值綁定的值沒有呈現，如果我選擇用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 ld喜歡將一個按鈕關聯到根viewModel中的一個函數。

$(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/

來源

2012-10-22 10:03:16 Mounir

引導酥料餅從模板

回答

相關問題