Menu
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.
557
Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy and obvious to bind to simple data properties or to use a single binding.
KO is able to create a two-way binding if you use value to link a form element to an Observable property, so that the changes between them are exchanged among them. If you refer a simple property on ViewModel, KO will set the form element's initial state to property value.
Data binding in concept is quite simple. On one side, you have a data model and on the other side, you have an interface, often called a view. The idea is that you want to “bind” some piece of data to something on the view so that when the data changes, the view changes. This is typical for read-only data.
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:
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
