Yet Another "Unable to parse bindings error" - Help

[messon]

I've been working on this for hours and a solution eludes me. The forum has a few threads with similar issues and I've attempted to follow and posted solutions but the results have the same.
Basically I pull data from Facebook into the view model which then instantiates a Caller object.  In the View, there is a data bind to a Caller property. Everything works smoothly except the console throws the error with a reference to the data-bind:

Uncaught Error: Unable to parse bindings. Message: ReferenceError: caller_name is not defined; Bindings value: text: caller_name

I appreciate any help - thanks.

Here is the view:
<p>Hello,  <span data-bind="text: caller_name"> </span></p>


Here is the view model controller & friend object:
(everything seems to work here)

    function Caller(caller_data) {
      var self = this;
      self.id = ko.observable(caller_data);
      self.caller_name = ko.observable();

      self.getCaller = ko.computed(function() {
        FB.api('/' + caller_data, {fields: 'name, id, picture'}, function (response) {
          //I can see all the data returned by FB with this call
        })
      })
    }

function ModelView (data_data) {
      var self = this;
      self.friendLists = []

      self.init = function () {
        FB.api('/me/friendlists', function (response) {

          for (var prop in response.data) {

            if (response.data[prop].list_type === "test1" || response.data[prop].list_type === "test2") {

              FB.api('/' + response.data[prop].id + '/members', function (member_response) {

                if (member_response.data.length > 0) {

                  for (var i in member_response.data) {

                    for (var k in member_response.data[i]) {

                        if (k == 'id') {
                          nameOfList.push(member_

response.data[i].id)
                        }
                    }
                  }
                  self.friendLists.push(nameOfList)
                  console.log("self.friendLists().length " + self.friendLists().length);
                 self.friend = new Friend(self.friendLists()[0][0])
                }
              })
            }
          }
        })

      };
      self.init();
    }

[rpn]

Hello-

The easiest way to diagnose the problem is to change your binding to look like:

<span data-bind="text: ko.toJSON($data)"></span>

This will tell you what the data looks like that you are binding against.  

Is the data null when you initially call ko.applyBindings?  I am not sue when/where that you construct the Caller object.

[messon]

Hi and thank you. Yes, the data is initially "null" when I call ko.applyBindings. This is how I'm integrating FB with Knockout at the moment (below):

1) call to FB API for data
2) pass FB data to ko.applyBindings ModelView
3) ModelView filters FB data and instantiates Caller object



FB.getLoginStatus(function (response) {
      if (response.authResponse) {
        accessToken = response.authResponse.accessToken;
        FB.api('/me', function (response) {
          ko.applyBindings(new ModelView (response));
        });
      } else {
        console.log('User cancelled login or did not fully authorize.');
      }
    });

[rpn]

Does your ModelView have an instance of the Caller object?  What does the ModelView object look like and what is the context when you are binding against caller_name?

If this gets populated later, then generally you would do something like:

<div data-bind="with: myCaller">

    <p>Hello,  <span data-bind="text: caller_name"> </span></p>

</div>