learn knockoutjs tutorial 1 not working

Magoron

unread,

Mar 28, 2017, 6:51:27 AM3/28/17

to KnockoutJS

Hello, I am new to KO and like to learn. The tutorial 1 at the learn.knockoutjs.com is itself not working when I click the run button. Or when I copies them to my local and run its only showing the fist: and last: todo.

Appreciate any help how to make it work.

Thank you

================= Here is the same code in my local index.html =============================

<html>

<head>

function AppViewModel() {

this.firstName = "Bert";

this.lastName = "Bertington";

}

// Activates knockout.js

ko.applyBindings(new AppViewModel());

</script>

</head>

<body>

<p>First name: <strong>todo</strong></p>

</body>

</html>.

Eric Anderson

unread,

Mar 28, 2017, 2:31:59 PM3/28/17

to KnockoutJS

The tutorial has instructions as you scroll down the "Step" instruction box in the upper left.

You need to adjust your HTML view to include the data-bind attributes:

<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

Otherwise KO doesn't know what to do with the viewModel is creates.

Magoron

unread,

Mar 28, 2017, 11:18:10 PM3/28/17

to KnockoutJS

Opps sorry, I got it. Thank you. Here is my final working code. Thanks for Eric Anderson for the good catch.

----------------------------------

<html>

<head>

</head>

<body>

<p>First name: <input data-bind="value: firstName" /></p>

function AppViewModel() {

this.firstName = ko.observable("Bert");

this.lastName = ko.observable("Bertington");

this.fullName = ko.computed(function() {

return this.firstName() + " " + this.lastName();

}, this);

}

// Activates knockout.js

ko.applyBindings(new AppViewModel());

</script>

</body>

</html>

===================================================

Eric Anderson

unread,

Mar 29, 2017, 6:02:31 PM3/29/17

to KnockoutJS

Excellent work, Magoron. Best of luck with the rest of the tutorial.

Reply all

Reply to author

Forward