淘汰赛弹出框模板

Posted 2023-03-27

【中文标题】淘汰赛弹出框模板

【英文标题】：Knockout popover template

【发布时间】：2018-09-05 18:16:20

【问题描述】：

如何在弹出框模板中获取用户名？

<script type="html/text" id="editTemplate">

用户：

在这里提琴：http://jsfiddle.net/gm79cr22/64/

谢谢

【问题讨论】：

我认为你应该使用component

Knockstrap 可能是另一种选择

【参考方案1】：

解决这个问题最简单的方法，就是使用jQuery直接创建并获取popover dom节点，这样你就可以使用它来应用绑定了。

var ViewModel = function() 
  self = this;
  self.exampleText = ko.observable("Click me!");

  var data = [
      name: "User1",
      date: "01/01/2017"
    ,
    
      name: "User2",
      date: "01/01/2017"
    ,
    
      name: "User3",
      date: "01/01/2017"
    ,
    
      name: "User4",
      date: "01/01/2017"
    
  ];

  self.users = ko.observableArray(data);

;

ko.bindingHandlers.popover = 
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    var cssSelectorForPopoverTemplate = ko.utils.unwrapObservable(valueAccessor());
    var popOverTemplate = $("<div class='my-knockout-popver'>" + $(cssSelectorForPopoverTemplate).html() + "</div>");

    $(element).popover(
      content: popOverTemplate,
      html: true,
      trigger: 'hover'
    );

    ko.applyBindings(viewModel, popOverTemplate[0]);
  ,
;

ko.applyBindings(new ViewModel());

@import url('https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css');
/*.example-container
    float: right;
    margin-top: 10px;
    
    font-size:24px;
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: users ">
    <td data-bind="text: name"></td>
    <td>
      <div data-placement="top" data-title="Info" data-bind="popover: '#editTemplate'">
        <i class="fa fa-adjust" aria-hidden="true"></i>
        <!-- This is the popover template  -->
        <script type="text/html" id="editTemplate">
          User: <span data-bind="text: name"></span>
        </script>
      </div>
    </td>
    <td data-bind="text: date"></td>
  </tbody>
</table>