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?
here is the fiddle for the solution below. http://jsfiddle.net/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 becomes a ko computed that is passed in.
this.getInfo = ko.computed(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.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.