Knockout.js
Bootstrap
英文原文：
Integrating Knockout with Twitter Bootstrap Popover
简介
Knockout 是一个功能强大,非常有用的 javascript 库，用于实现在模板中双向绑定的 MVVM(Model-View-ViewModel) 模式，并有内置的绑定支持来绑定数据到 HTML 元件上去。
Knockout 也支持开发者来编写自定义的绑定规则（即时生效）并可使用这些规则来绑定数据到 HTML 元件上去。
Twitter Bootstrap 是一个 web UI 工具集 (HTML / CSS 和 Javascript)，用于构建富应用的、响应式的 web 应用。
要了解更多关于 Twitter Bootstrap Popover 的信息，请单击 此处
如下代码阐述了如何使用 Knockout 来绑定模型（数据）到Twitter Bootstrap Popover 上去。
关于这段代码，我使用了 Knockout 自定义绑定处理器。要了解更多关于 Knockout 自定义绑定处理器的信息，请单击 此处
界面外观
1. 表格中展示的初始数据。
2. 在单击 “Edit” 之后，伴随着相应人员的数据的 popover 将会被显示。
3. 一旦 popover 中任意的数据被修改，视图中相应的数据也将被更新。
代码的使用
如下便是使用 twitter bootstrap popover 来绑定 knockout view model 的工作代码。
在代码开始处，我给出了 Knockout、JQuery 和 Bootstrap 的 CDN 引用路径。
接下来，我创建了一个 Person ViewModel，它是一个 Person 的集合（监控数组），将被绑定到 Popover（View）上去。
现在，关键部分就是定义 Knockout 自定义绑定处理器。Knockout 自定义绑定处理器将包含两个方法，即 init 和 update 方法。这里我已经在 init 方法中设置好了属性集合，比如要绑定此处理器的元素，并传入了 “id” 和动态的模板内容。使用 bindingContext，我们能够附加 ViewModel 到 Popover 的 HTML 内容上去（注： 原文为 Using bindingContext, we can attach the ViewModel to the Popover HTML content）。
同时要确保 popover 触发器属性被设置为 “manual”，而绑定将会在 click 事件中进行处理。
使用 Knockout 模板（“person-template”）和 View Model，模板将通过双向绑定的支持来进行渲染。任意的针对 popover 中任何数据的修改将被反射回 view 中去，即，Person 表中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Knockout and Bootstrap Popover</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var personViewModel = function () {
var self = this;
self.persons = ko.observableArray();
self.persons.push({
id: 1,
firstName: ko.observable("John"),
lastName: ko.observable("Doe"),
email: ko.observable("john.doe@email.com")
})
self.persons.push({
id: 2,
firstName: ko.observable("Greg"),
lastName: ko.observable("Smith"),
email: ko.observable("greg.smith@email.com")
})
self.persons.push({
id: 3,
firstName: ko.observable("Tom"),
lastName: ko.observable("Walter"),
email: ko.observable("tom.walter@email.com")
});
self.closePopover = function (person) {
$('#popover' + person.id + "_click").popover("hide");
};
}
</script>
<script>
ko.bindingHandlers.popUp = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var attribute = ko.utils.unwrapObservable(valueAccessor());
var templateContent = attribute.content;
var popOverTemplate = "<div class='popOverClass' id='" + attribute.id + "-popover'>" + $(templateContent).html() + "</div>";
$(element).popover({
placement: 'right',
content: popOverTemplate,
html: true,
trigger: 'manual'
});
$(element).attr('id', "popover" + attribute.id + "_click");
$(element).click(function () {
$(".popOverClass").popover("hide");
$(this).popover('toggle');
var thePopover = document.getElementById(attribute.id + "-popover");
childBindingContext = bindingContext.createChildContext(viewModel);
ko.applyBindingsToDescendants(childBindingContext, thePopover);
})
}
}
</script>
<br />
<br /><br /><br /><br /><br /><br />
<table border="1" cellpadding="0" cellspacing="0" data-bind="foreach: persons">
<tr>
<td><span data-bind="text: firstName"></span></td>
<td><span data-bind="text: lastName"></span></td>
<td><span data-bind="text: email"></span></td>
<td><a href="#" data-bind="popUp: {content: '#person-template', id: id}">Edit</a></td>
</tr>
</table>
<script type="text/html" id="person-template">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>First Name</td>
<td><input type="text" data-bind="value: firstName, valueUpdate:'keyup'" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" data-bind="value: lastName, valueUpdate:'keyup'" /></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" data-bind="value: email, valueUpdate:'keyup'" /></td>
</tr>
</table>
<br>
<div class="row-fluid">
<center>
<div class="span3 offset1">
<button class="btn btn-small btn-danger" data-bind="click:$root.closePopover">Close</button>
</div>
</center>
</div>
</script>
<script>
ko.applyBindings(new personViewModel());
</script>
</body>
</html>
总结
我希望本文能够对那些正在使用 Knockout 和 Twitter bootstrap 来构建富应用和响应式 UI 的开发者来说有帮助。尽管我使用了预填充的数据，你也可以从任意的服务中来获取数据。
谢谢阅读。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
