javascript - Bootstrap popover for a knockout data-bind list - Stack Overflow

admin管理员组

文章数量:1419250

I've been working with knockout and bootstrap popover for a couple of days and I've got an datatable that displays some info using knockout data-binds.

<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>

and when the tehValue is clicked it fires a function that displays a random message:

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

The problem is that it displays the popup only for the first clicked value but not for the others.

Is there a way to display a different popup for each value of data-bind tehlist?

UPDATE

I've changed to:

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

And the function to:

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

I'm still getting the popover only for the first value on click.

Is there a way to display a popover for a button without using the Id but only onclick using the getinfo function?

I've been working with knockout and bootstrap popover for a couple of days and I've got an datatable that displays some info using knockout data-binds.

<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>

and when the tehValue is clicked it fires a function that displays a random message:

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

The problem is that it displays the popup only for the first clicked value but not for the others.

Is there a way to display a different popup for each value of data-bind tehlist?

UPDATE

I've changed to:

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

And the function to:

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

I'm still getting the popover only for the first value on click.

Is there a way to display a popover for a button without using the Id but only onclick using the getinfo function?

• javascript
• jquery
• twitter-bootstrap
• knockout.js

Share Improve this question Follow edited Sep 25, 2017 at 16:44 Graham 7,8122020 gold badges6565 silver badges9292 bronze badges asked Nov 7, 2016 at 13:27 LAffairLAffair 1,99866 gold badges3333 silver badges6464 bronze badges 5

• Did you check out the (stackoverflow) docs on the click binding? stackoverflow./documentation/knockout.js/7101/… – user3297291 Commented Nov 7, 2016 at 13:35
• I've updated my question after checking your ment, but I still have the same problem... Perhaps has something to do with the id :( – LAffair Commented Nov 7, 2016 at 14:50
• Definitely, you cannot use the same id multiple times. Since foreach uses the html below as a template, it will give each list item the same id. Look into custom bindings (the preferred way of dealing with the DOM). If you just want a quick and dirty fix, you could use event.target (not remended). – user3297291 Commented Nov 7, 2016 at 14:53
• But then, is there a way to display a popover for a button without using the Id but only onclick using the getinfo function? – LAffair Commented Nov 7, 2016 at 14:57
• If you insist on using the viewmodel's getinfo method to show the popup (which isn't really the knockout-way of doing it), you can use: $(event.target).popover({ /* options */ }) – user3297291 Commented Nov 7, 2016 at 14:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

here is the fiddle for the solution below. http://jsfiddle/bdellinger/LkqTU/32342/

how about make a custom binding for your popover something like.

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);
  }
};

and your function bees a ko puted that is passed in.

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

then call it in the html like this.

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

below is the entire solution, or you can just click on the fiddle link above.

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.puted(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>

本文标签： javascriptBootstrap popover for a knockout databind listStack Overflow