Byron Sommardahl Byron Sommardahl - 1 month ago 18
HTML Question

Is there a way to set the page title by data-binding using Knockout.js?

I have a viewModel with a

Title
property. I'd like to set the page title using that property. Here's what I tried already, which didn't work:

<html>
<head>
<title data-bind="text: Title"></title>
</head>
<body>
<span data-bind="text: Title"/> <!-- this displays the title properly -->
</body>


The browser title is blank/default instead of the value of my
Title
property.

Answer

Try giving your html element an id

<html id="htmlTop" xmlns="http://www.w3.org/1999/xhtml">

and applying your viewModel to it

ko.applyBindings(viewModel, document.getElementById("htmlTop"));

EDIT

This works for me; I just ran this page and the title said "Hello". Double check your code for typos.

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

Screenshot:

enter image description here