Knockout.js If statement issue

Question

I want to check my 'Type' binding if he is equal to a certain string but it looks like he is not executing it.

My html page:

 <div class="socialWrapper" data-bind="foreach: facebookposts">
         <!-- ko if: {Type()==='link'}-->
         <img data-bind='attr: { src: FromPicture }'/>
         <p data-bind="text:From"></p>
         <!-- /ko -->
 </div>

When I just return:

<p data-bind="text: Type"></p>

my output= "string"

As you can see I want to get the correct observables based on the if-statement. Viewmodel:

function Post(allData) {
    var profileImageUrl = "http://graph.facebook.com/" + allData.from.id + "/picture?type=large";
    this.Type = ko.observable(allData.type);
    this.From = ko.observable(allData.from.name);
    this.FromPicture = ko.observable(profileImageUrl);
    this.Created = ko.observable(allData.created_time);
    this.Comments = ko.observable(allData.comments.count);
    this.Message = "";
    this.Likes = "";
    this.LinkImage = "";
    this.LinkUrl = "";
    this.LinkName = "";
    this.LinkTitle = "";
    this.LinkDescription = "";
    this.Story = "";
    this.Photo = "";
    this.PhotoDescription = "";


    if (allData.type === 'status') {
        this.Message = ko.observable(allData.message);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'link') {
        this.Message = ko.observable(allData.message);
        this.LinkImage = ko.observable(allData.picture);
        this.LinkUrl = ko.observable(allData.link);
        this.LinkName = ko.observable(allData.name);
        this.LinkTitle = ko.observable(allData.caption);
        this.LinkDescription = ko.observable(allData.description);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'photo') {
        this.Story = ko.observable(allData.story);
        this.Photo = ko.observable(allData.picture);
        this.PhotoDescription = ko.observable(allData.description);
    }
}

    var masterViewModel = { 
        facebookposts: ko.observableArray([]),
        getFacebookObjects: function () {
            var getUrl = '/api/facebookposts?accesstoken=@Session["fb_access_token"]';
            $.ajax({
                url: getUrl,
                type: 'GET',
                dataType: 'json',
                success: function (allData) {
                    var mappedPosts = $.map(allData, function (item) {
                        return new Post(item);
                    });
                    masterViewModel.facebookposts(mappedPosts);
                },
                statuscode: {
                    401: function () {
                        console.log("Not Authorized");
                    }
                }
            });
        }
     };

$(document).ready(function () {
    ko.applyBindings(masterViewModel);
    masterViewModel.getFacebookObjects();
});

Anyone got an idea on how to fix this if statement?

Answer 1

UPDATED - with whole view model

I would make a computed observable on your viewmodel that looks like this

function Post(allData) {
    var profileImageUrl = "http://graph.facebook.com/" + allData.from.id + "/picture?type=large";
    this.Type = ko.observable(allData.type);
    this.From = ko.observable(allData.from.name);
    this.FromPicture = ko.observable(profileImageUrl);
    this.Created = ko.observable(allData.created_time);
    this.Comments = ko.observable(allData.comments.count);
    this.Message = "";
    this.Likes = "";
    this.LinkImage = "";
    this.LinkUrl = "";
    this.LinkName = "";
    this.LinkTitle = "";
    this.LinkDescription = "";
    this.Story = "";
    this.Photo = "";
    this.PhotoDescription = "";

    var self = this;
    this.isLink = ko.computed(function() {
        return self.Type() === 'link';
    });

    if (allData.type === 'status') {
        this.Message = ko.observable(allData.message);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'link') {
        this.Message = ko.observable(allData.message);
        this.LinkImage = ko.observable(allData.picture);
        this.LinkUrl = ko.observable(allData.link);
        this.LinkName = ko.observable(allData.name);
        this.LinkTitle = ko.observable(allData.caption);
        this.LinkDescription = ko.observable(allData.description);
        this.Likes = ko.observable(allData.likes);
    }
    if (allData.type === 'photo') {
        this.Story = ko.observable(allData.story);
        this.Photo = ko.observable(allData.picture);
        this.PhotoDescription = ko.observable(allData.description);
    }
}

then

<div class="socialWrapper" data-bind="foreach: facebookposts">
         <!-- ko if: isLink -->
         <img data-bind='attr: { src: FromPicture }'/>
         <p data-bind="text:From"></p>
         <!-- /ko -->
</div>

Personally I like to keep my view as clean as possible, meaning no javascript evaluations. Better separation of concerns.

Answer 2

I think you need to use the $parent context binding. Try this out -

 <div class="socialWrapper" data-bind="foreach: facebookposts">
     <!-- ko if: $parent.Type === 'link'-->
     <img data-bind='attr: { src: FromPicture }'/>
     <p data-bind="text:From"></p>
     <!-- /ko -->
 </div>

http://jsfiddle.net/belthasar/DaN2X/