Knockout: First Name - Last Name Joiner Not Working

Question

I am trying to use knockout and join together a first name and a last name which the user inputs. It is based off of this example: http://knockoutjs.com/examples/helloWorld.html

I tried changing the functions a bit to get a feel for knockout. The code looked good, but the output didn't change. I then tested to see if the exact code from the tutorial would work for me, but it doesn't. I'm pretty sure I'm missing something really obvious. Can someone tell me what that is?

This is my HTML:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<!--view-->
<head>
    <meta charset="utf-8" />
    <title>Testing Knockout</title>
    <script src="knockoutTester.js"></script>
    <script src="knockout-3.4.0.js"></script>

</head>
<body>
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>


</body>                                             
</html>

This is my JS:

var ViewModel = function (first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function () {
        return this.firstName() + " " + this.lastName();
    }, this);
};    
ko.applyBindings(new ViewModel("Planet", "Earth"));

Thanks

What is knockoutTester.js file? Is your JS code stored in this file? — dotnetom, Aug 10 '16 at 18:35
@dotnetom yes, my JS code is stored in the knockoutTester.js file — Parth Parulekar, Aug 10 '16 at 18:36

score 3 · Accepted Answer · edited May 23 '17 at 11:51

3

Your JS code is fine. The problem is the order in which you added JS files in your HTML file:

<script src="knockoutTester.js"></script>
<script src="knockout-3.4.0.js"></script>

In order for your code to work you need to load Knockout first, and only then load your custom code. So change above lines to

<script src="knockout-3.4.0.js"></script>
<script src="knockoutTester.js"></script>

and it should start working.

You also need to make sure that your custom JavaScript code runs only after DOM is loaded, because all DOM elements should be loaded when the scripts are run. You can use jQuery's method $(document).ready or use any other alternative (e.g. as described in $(document).ready equivalent without jQuery).

Alternatively you could include the line <script src="knockoutTester.js"></script> at the bottom of the body (so it only loads after DOM above is loaded)

edited May 23 '17 at 11:51

Community

1
1

answered Aug 10 '16 at 18:38

dotnetom

23,445
9
47
52

I switched the two, but it still didn't work. Thanks though, you caught something really vital. This is tricky. – Parth Parulekar Aug 10 '16 at 18:43
@TheWorldSoul Have you tried running your script only after DOM is loaded or loading your custom script at the bottom of `body` element? I updated the answer with the details. – dotnetom Aug 10 '16 at 18:45
I added the src for knockoutTester.file at the bottom of the body. But it still doesn't work. Do I have to do some initiation for knockout at the top of the javascript file? I feel like its incomplete. – Parth Parulekar Aug 10 '16 at 18:52
My chrome debugger says that the html file cannot find the knockout file. – Parth Parulekar Aug 10 '16 at 19:50
Do you have a copy of knockout-3.4.0.js with the rest of your files? – Michael Best Aug 10 '16 at 23:53
@MichaelBest Yeah, I have a copy of that – Parth Parulekar Aug 11 '16 at 17:09
@MichaelBest Ok so yeah, I had the knockout file in a folder with the rest of my files. I took it out of the folder and it worked... I knew I made some dumb mistake like that. Sorry for wasting time. Thanks guys. – Parth Parulekar Aug 11 '16 at 17:13

Knockout: First Name - Last Name Joiner Not Working

1 Answers1