gpt4 book ai didi

javascript - 用于 knockout 数据绑定(bind)列表的 Bootstrap 弹出窗口

转载 作者:行者123 更新时间:2023-11-30 09:42:36 25 4
gpt4 key购买 nike

我已经使用 knockout 和 bootstrap popover 工作了几天,并且我有一个数据表使用 knockout 数据绑定(bind)显示一些信息。

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

问题是它只显示第一个单击值的弹出窗口,而不显示其他值。

有没有办法为数据绑定(bind) tehlist 的每个 value 显示不同的弹出窗口?

更新

我已经更改为:

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

以及函数:

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

我仍然只在点击第一个值时获得弹出窗口。

有没有一种方法可以在不使用 Id 而只使用 getinfo 函数的 onclick 的情况下显示按钮的弹出窗口?

最佳答案

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

如何为您的弹出窗口创建一个自定义绑定(bind)?

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

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>

下面是完整的解决方案,或者您可以单击上面的 fiddle 链接。

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>

关于javascript - 用于 knockout 数据绑定(bind)列表的 Bootstrap 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40466367/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com