有没有办法使用Knockout.js通过数据绑定设置页面标题？
Byr*_*ahl 24 html javascript knockout.js
我有一个带有Title属性的viewModel .我想使用该属性设置页面标题.这是我尝试过的,但是没有用:
<html>
<head>
<title data-bind="text: Title"></title>
</head>
<body>
<span data-bind="text: Title"/> <!-- this displays the title properly -->
</body>
浏览器标题为空/默认值,而不是我的Title属性值.
Ada*_*kis 20
尝试给你的html元素一个id
<html id="htmlTop" xmlns="http://www.w3.org/1999/xhtml">
并将viewModel应用于它
ko.applyBindings(viewModel, document.getElementById("htmlTop"));
编辑
这适合我; 我刚跑了这个页面,标题上写着"你好".仔细检查你的代码是否有拼写错误.
<html id="htmlTop">
<head>
<title data-bind="text: title"></title>
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>
<script type="text/javascript">
$(function () {
var viewModel = { title: "Hello" };
ko.applyBindings(viewModel, document.getElementById("htmlTop"));
});
</script>
</head>
<body>
</body>
</html>
截图:
- 通过使用:ko.applyBindings(viewModel,document.getElementsByTagName('html')[0])我没有将id添加到<html>元素,我得到了这个工作.希望能够简化你的答案. (7认同)
- 我使用了更通用的解决方案`document.documentElement` (2认同)
在我看来，这种情况很可观。
...
<title>{FALL BACK TEXT}</title>
...
查看模型
ViewModel = function() {
var self = this;
self.PageTitle = ko.observable(null);
self.PageTitle.subscribe(function(newValue){ document.title = self.PageTitle() });
//change PageTitle to see your handy work in action
self.PageTitle("Hello World!");
};
编辑：作为对我先前回答的修正，我想提出以下内容。我以前的建议行得通吗？是的，效果很好。但是，视图模型本身中的DOM操作并未“完全”遵循MVVM范例。实际的“最佳”方法是创建一个自定义绑定，该绑定在更新特定可观察对象时设置文档标题。
...
<title data-bind="htmlDocumentTitle: PageTitle()">{FALLBACK TEXT}</title>
...
查看模型
ViewModel = function() {
var self = this;
self.PageTitle = ko.observable(null);
self.init = function(){
self.PageTitle("My page title from an obersvable");
};
//init the viewmodel
self.init();
};
最后，我们闪亮的自定义绑定“监听”可观察对象的更改（请注意仅使用update操作）
ko.bindingHandlers.htmlDocumentTitle = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var fallbackTitle = "My document title";
var title = ko.unwrap(valueAccessor());
if(!title || title == null && title == "")
title = fallbackTitle;
document.title = title;
}
};
乍看之下，该解决方案的可扩展性似乎较差，但请记住，我们可以使用“ call（）”通过敲除视图模型来创建“伪继承”。
- 为我工作！当您不想用KO标记污染页面标题时，这是一种特别方便的方法，而KO标记只会在某些特定情况下动态使用。 (2认同)