用于击倒数据绑定列表的引导弹出窗口

Bootstrap popover for a knockout data-bind list

本文关键字：窗口 数据绑定 列表 用于      更新时间：2023-09-26

我已经与淘汰赛和引导弹出窗口工作了几天，我有一个数据表，显示一些信息使用淘汰赛数据绑定。

<tbody data-bind="foreach: tehlist()">
  <tr>
     <td data-bind="text: $data.Category"></td>
     <td data-bind="text: $data.Name"></td>
     <td><button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value" style="border:none" onclick="getinfo()"></button></td>
  </tr>
</tbody>

，当tehValue被点击时，它会触发一个函数，显示一个随机消息:

function getinfo(veh, item) {
    $('#tehValue').popover({
        content: 'Dana' + Math.random(),
        html: true
    });  
}

问题是，它显示的弹出只为第一个点击值，而不是为其他的。

是否有一种方法来显示每个value的数据绑定tehlist不同的弹出窗口?

我已经改成:

<button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value, click: getinfo" style="border:none"></button></td>

和函数to:

getinfo = function (item, event) {
        $('#tehValue').popover({
            content: 'Dana' + Math.random(),
            html: true
        });
    }

我仍然得到弹窗只为第一个值点击。

是否有一种方法来显示一个弹出窗口的按钮，而不使用Id，但只有onclick使用getinfo函数?

是下面的解决方案。http://jsfiddle.net/bdellinger/LkqTU/32342/

如何为你的弹出窗口做一个自定义绑定，比如

ko.bindingHandlers.popover = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings);
    var source = allBindings.get('popoverTitle');
    var sourceUnwrapped = ko.unwrap(source);
    $(element).popover({
      trigger: 'focus',
      content: valueAccessor(),
      title: sourceUnwrapped
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
    ko.bindingHandlers.value.update(element, valueAccessor);
  }
};

，你的函数变成了一个被传递进来的ko。

this.getInfo = ko.computed(function() {
    return this.name() + " " + Math.random()
  }, this);

然后在HTML中像这样调用它

  <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-bind="popover: getInfo, popoverTitle: category">?</button>

下面是完整的解决方案，或者你可以直接点击上面的小提琴链接。

javascript。

ko.bindingHandlers.popover = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings);
    var source = allBindings.get('popoverTitle');
    var sourceUnwrapped = ko.unwrap(source);
    $(element).popover({
      trigger: 'focus',
      content: valueAccessor(),
      title: sourceUnwrapped
    });
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
    ko.bindingHandlers.value.update(element, valueAccessor);
  }
};

function teh(category, name) {
  var self = this;
  this.category = ko.observable(category);
  this.name = ko.observable(name);
  this.getInfo = ko.computed(function() {
    return this.name() + " " + Math.random()
  }, this);
}
function model() {
  var self = this;
  this.tehlist = ko.observableArray('');
}
var mymodel = new model();
$(document).ready(function() {
  ko.applyBindings(mymodel);
  mymodel.tehlist.push(new teh('car', 'honda'));
  mymodel.tehlist.push(new teh('dog', 'pug'));
  mymodel.tehlist.push(new teh('language', 'spanish'));
  mymodel.tehlist.push(new teh('pc', 'dell'));
});
html 

<table class="table table-striped">
  <thead>
    <tr>
      <th>Category</th>
      <th>Name</th>
      <th>Get Info</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: tehlist">
    <tr>
      <td>
        <label data-bind="text:category" </td>
          <td>
            <label data-bind="text:name" </td>
              <td>
                <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-bind="popover: getInfo, popoverTitle: category">?</button>
              </td>
    </tr>
  </tbody>
</table>
<div>
相关文章：