KnockoutJS + facebook application

[taylby]

I am working on a facebook application using Javascript, Knockout JS and ofcourse facebook's js SDK.

I have created my view model to have several properties on, one of which is the facebook user id. This I will send off to my server in due course so I can tie-in to the data that I have about that user.

for example:

FB.getLoginStatus(function (response) {
            if (response.status === 'connected') {
                // connected
                alert('authoried & logged in ' + response.user_id);

                testAPI();

            } else if (response.status === 'not_authorized') {
                // not_authorized
                alert('not authoried ');
                login();
            } else {
                // not_logged_in
                login();
            }
        });`

which gets the connection information from facebook when the applicatio loads. I have a method that gets ran if the user is logged in and has approved the application. This is called testAPI();

what Test API looks like is this:

 function testAPI() {
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function (response) {
            console.log('Good to see you, ' + response.name + ' ' + response.id + '.');
            alert('Your name is ' + response.name);
            $.get("http://localhost/LLCFaceBook/service1.svc/Registered/" + response.id, null, alert(response.id));


            // attempt to set the information for the user back into the viewmodel from the testAPI();

            BorrowerViewModel.borrowerNumber = response.id;
            alert(BorrowerViewModel.borrowerNumber + " Set on Borrower View model. should be:" + response.id);
            BorrowerViewModel.updateBorrower(response.id);



>         });

I have some debug alert statements here but in essense what this should be doing is writting a message to myself in the console. and then sending the data to the web services (which it does) and then sets the property on the ViewModel.

`var BorrowerViewModel = function () {

       var self = this;
       self.firstName = ko.observable("P");
       self.surName = ko.observable("Taylby");
       self.borrowerNumber = ko.observable("0123456789a");
       shouldShowMessage: ko.observable(true) // Message initially visible
       self.updateBorrower = function (id) {
           alert("Did you see me?" + id);
           //this.borrowerNumber() = "1234";
           alert(this.borrowerNumber() + "Hi");

       };
       };



`

Using the above alert messages I can see that I have been able to set the borrower number. However I have a input box of type text which should update if the borrower number changes. This doesn't happen. To make things even stranger; and remembering that I compared what I had in the view model with the response from Facebook with the following

`BorrowerViewModel.borrowerNumber = response.id;
            alert(BorrowerViewModel.borrowerNumber + " Set on Borrower View model. should be:" + response.id);`

within the testAPI() method. I have a button which when pressed will show the value of BorrowerViewModel.borrowerNumber.

Therefore my question is this:

1) from the testAPI method how can I call the function 'updateBorrower' which lies in my ViewModel.
2) Why is there an extra instance of a viewmodel created which is recording the borrower number within the testAPI() method, when I explisitly set the property but not from the click event on the HTML?

I appreciate any advice; I am very new to JS and KnockoutJS etc

Kind regards

Taylby.

[LastMitch]

Why is there an extra instance of a viewmodel created which is recording the borrower number within the testAPI() method, when I explisitly set the property but not from the click event on the HTML?

This blog show how to implementing facebook:

http://weblogs.asp.net/jimwang/archive/2012/02/23/implementing-a-facebook-like-button-with-knockout-js.aspx

I realized you are building a dynamic page.

Read this:

http://blog.teamtreehouse.com/build-dynamic-pages-with-knockout-js

[ryanki10]

Sounds like your getting confused between declaring an object with curly braces and properties e.g. BorrowerViewModel = {ShouldShowMessage: ko.observable(true)} and treating BorrowerViewModel as a function/class with properties e.g. var borrowerViewModel = new BorrowerViewModel() where the properties are the ones declared with the self.? statement eg. self.FirstName. In the latter case you'll need to make an instance as described and then access the property on the instance variable e.g. alert(borrowerViewModel.borrowerNumber);