【发布时间】：2013-02-11 22:21:12
【问题描述】：
我正在尝试为引用模板的 twitter boostrap 弹出框创建自定义绑定，但在创建后弹出框内的内容绑定部分出现问题。
我之前看到过这个问题，但我觉得它们大多都很混乱，而且我非常接近一个可重用的解决方案，它可以按照我的意愿使用模板。
http://jsfiddle.net/billpull/Edptd/
// Bind Twitter Popover
ko.bindingHandlers.popover = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var tmplId = ko.utils.unwrapObservable(valueAccessor());
var tmplHtml = $('#' + tmplId).html();
var uuid = guid();
var domId = "ko-bs-popover-" + uuid;
var tmplDom = $('<div/>', {
"class" : "ko-popover",
"id" : domId
}).html(tmplHtml);
options = {
content: tmplDom[0].outerHTML
};
var popoverOptions = ko.utils.extend(ko.bindingHandlers.popover.options, options);
console.log($(element));
console.log(element);
$(element).bind('click', function () {
$(this).popover(popoverOptions).popover('toggle');
ko.applyBindings(bindingContext, document.getElementById(domId));
});
},
options: {
placement: "right",
title: "",
html: true,
content: "",
trigger: "manual"
}
};
===编辑
根据以下答案更新代码，无需额外的 withProperties 绑定即可完成此操作
// Bind Twitter Popover
ko.bindingHandlers.popover = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// read popover options
var popoverBindingValues = ko.utils.unwrapObservable(valueAccessor());
// set popover template id
var tmplId = popoverBindingValues.template;
// set popover trigger
var trigger = popoverBindingValues.trigger;
// get template html
var tmplHtml = $('#' + tmplId).html();
// create unique identifier to bind to
var uuid = guid();
var domId = "ko-bs-popover-" + uuid;
// create correct binding context
var childBindingContext = bindingContext.createChildContext(viewModel);
// create DOM object to use for popover content
var tmplDom = $('<div/>', {
"class" : "ko-popover",
"id" : domId
}).html(tmplHtml);
// set content options
options = {
content: tmplDom[0].outerHTML
};
// Need to copy this, otherwise all the popups end up with the value of the last item
var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options);
popoverOptions.content = options.content;
// bind popover to element click
$(element).bind(trigger, function () {
$(this).popover(popoverOptions).popover('toggle');
// if the popover is visible bind the view model to our dom ID
if($('#' + domId).is(':visible')){
ko.applyBindingsToDescendants(childBindingContext, $('#' + domId)[0]);
}
});
return { controlsDescendantBindings: true };
},
options: {
placement: "right",
title: "",
html: true,
content: "",
trigger: "manual"
}
};
【问题讨论】：
-
这里的实际问题是什么？你还没有描述问题是什么。
-
"创建后弹出框内的内容绑定部分出现问题。"
-
我确信这一定是可能的，虽然不是直截了当，但我现在没有时间看。我今晚去看看。
-
谢谢，我相信我只是在应用绑定时没有访问正确的变量，当您在页面上有多个视图模型时，这似乎更加棘手。
-
@BillPull 我已经玩了几个小时你的库淘汰赛-boostrap 试图在弹出窗口中添加一个选择，在它呈现后我想使它成为一个引导选择控件。如何在您的弹出框绑定中实现 afterRender？ silviomoreto.github.io/bootstrap-select/3
标签： twitter-bootstrap knockout.js popover knockout-2.0