Knockout component viewModel not instantiating?

639 views
Skip to first unread message

David Walton

unread,
Aug 24, 2016, 9:06:40 AM8/24/16
to KnockoutJS
I desire to move my normal Knockout code to a more component based solution. This is the modified example from KO's website.

In the second instance where I pass in "params" the component works as expected. But in the first instance there is an error generated:

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

I have a habit of creating a namespace to keep variables out of window (TEST). Also to simplify and debug, this example is pure Javascript, no jQuery. Do you see what I am doing wrong in hooking up the viewModel into the component?

<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <title>KO Component Test</title>

    <script src="cached/js/lib/knockout-3.4.0.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function(event) {

            console.log("Event 'DOMContentLoaded' has fired.");

            var TEST = {};
            TEST.VM = function VM(_params) {
                this.myText = ko.observable(_params && _params.myText || "No params passed.");
            };


            ko.components.register('message-editor', {
                viewModel: TEST.VM,
                template: 'Message: <input data-bind="value: myText" /> '
            });

            ko.applyBindings();

        });
    </script>
</head>

<body>
    <h4>First instance, without parameters</h4>
    <div data-bind="component:{name:'message-editor'}"></div>

    <h4>Second instance, with parameters</h4>
    <div data-bind="component:{name:'message-editor', params:{myText:'Dude'}}"></div>

</body>

</html>


Thanks kindly.

noirabys

unread,
Aug 24, 2016, 10:52:08 AM8/24/16
to KnockoutJS
hi 
your code does not give any errors in ko 3.4.0 and ko 3.2.0 
tested with IE 11 and chrome52.
which browser do you use? 
Message has been deleted

Andrew Durber

unread,
Aug 24, 2016, 11:01:00 AM8/24/16
to KnockoutJS
I don't think you've applied bindings correctly, could you try:
The function is to represent an empty viewmodel. 
ko.applyBindings(function(){});

David Walton

unread,
Aug 24, 2016, 11:34:34 AM8/24/16
to KnockoutJS
It is Chrome 52 that is giving the error message I provided. Interesting that you see no error. The first instance should have "No params passed." as the value in the input - does it for you? It does not here, just shows the error in the console.

David Walton

unread,
Aug 24, 2016, 11:50:19 AM8/24/16
to KnockoutJS
The code...

ko.applyBindings(function(){});

...makes no difference. Thanks for the effort though. Its got something to do with how this viewModel is setup I am sure.
Message has been deleted
Message has been deleted

noirabys

unread,
Aug 25, 2016, 2:54:10 AM8/25/16
to KnockoutJS
perhaps you didn't paste the complete code ...
please try:

 <div data-bind="component:{name:'message-editor', params:{'myText':'Dude'}}"></div>


David Walton

unread,
Aug 25, 2016, 6:05:19 AM8/25/16
to KnockoutJS
So during additional debugging I happened upon a very strange thing indeed. In the code above you will note that I am using a local copy of KO v3.4.0 right? While creating a jsFiddle of this problem though, I of course needed to pull KO from the CDN and so I replaced my call to the local copy with this:

Running the test again and  - DING - no more problem. The error is gone and the first instance is populated with "No params passed." as it should.

My mind is spinning on what the cause would be. Is the DOMContentLoaded event firing before KO is loaded? Don't think so because the error is genuine. Is my local copy corrupt? Then why does it work on the second instance?

I'm not sure if this is better or worse!  lol

David Walton

unread,
Aug 25, 2016, 6:16:29 AM8/25/16
to KnockoutJS
Following up on my last post - I replaced my local copy with a fresh version from the CDN and everything is fine. The code was right all along and something VERY weird was going on with the local copy - why it worked on the second instance and not the first I will never know.

NOIRABYS - Thanks for the assistance.
Reply all
Reply to author
Forward
0 new messages