有没有办法使用Knockout.js通过数据绑定设置页面标题？

时间：2011-12-27 21:55:35

标签： javascript html 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>

浏览器标题为空白/默认值，而不是my Title属性的值。

4 个答案:

答案 0 :(得分：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>

截图：

enter image description here

答案 1 :(得分：3)

您可以创建custom binding handler，在更新时设置document.title，然后将绑定添加到body元素。

答案 2 :(得分：3)

您可以使用knockout subscribe：

function viewModel() {
  var self = this;

  self.title = ko.observable(null);
  self.title.subscribe(function(newTitle) {
      document.title = newTitle;
  })  
}

var vm = new viewModel();
ko.applyBindings(vm);

vm.title('Hello page');

答案 3 :(得分：0)

根据@ Douglas的建议，我的解决方案是在绑定到计算值的正文中的某处添加一个隐藏的div：

<div data-bind="text: currentPageTitle()"></div>

然后，在值计算中，我设置document.title：

self.currentPageTitle = ko.computed(function() {
    document.title = self.Title();
    return self.Title();
}, this);

这对我来说很完美

相关问题
最新问题