Knockout – Unable to process binding

I am pulling my hair out with this one as I can’t seem to get knockout working properly. I am using knockout on a wordpress theme. I wrote a knockout viewmodel which is a bit complex and it did work but all of sudden today it started giving me the error Unable to process binding. So I just created a very simple Knockout viewmodel to make sure that my original code is not the cause of the issue. And its still giving me the same error. Below is what I have for testing purposes:

Script:

Read More
function AppViewModel() {
    this.firstName = "Bob";
    this.lastName = "Dylan";
}

jQuery(document).ready(function() {
    ko.applyBindings(new AppViewModel(), document.getElementById('test'));
});

Markup:

<div class="row" id="test">
    <p>First name: <strong data-bind="text: firstName">N/A</strong></p>
    <p>Last name: <strong data-bind="text: lastName">N/A</strong></p>
</div>

Error:

Uncaught ReferenceError: Unable to process binding "text: function (){return firstName }"
Message: firstName is not defined

I have knockout and my script file loading in the WordPress functions.php file and they both seem to be loading fine when I checked the browser. This is everything I can think of including here. I am sure there is nothing wrong with the code I posted above and there is something else causing the issue so if you need me to provide more information please ask. Thanks a lot for the help!

Related posts