knockout not all properties are being mapped

Question

I suppose that for the knockout experts this will be a simple question for me it's confusing.

My JSON input:

    {
      "odata.metadata":"http://localhost:49163/odata/$metadata#TwitterMessages","value":[
        {
          "message":{
            "text":"Pellentesque fermentum a diam a suscipit. Donec ultrices tempor sapien, vitae dictum erat pulvinar sagittis. Vivamus a fermentum lectus, et lacinia enim. Morbi pretium adipiscing risus, vitae euismod lacus fermentum eu.","company_fk":3,"image_url":"http://www.baconwrappedmedia.com/wp-content/uploads/2013/01/funny-kids-bacon-wrapped-media-21.jpg","active":true,"author_id":"3242342423","message_id":3,"author_picture":"http://3.bp.blogspot.com/_Gxh8CVH8l8Y/TJBDI4QVfnI/AAAAAAAAAWE/W1H4Z2MAub0/s1600/547206_1271901770610.27res_400_483.jpg","author_name":"Ligula","source":"TWITTER","createddatefriendly":"1 day ago","message":"Ut at erat at mauris euismod tincidunt non id justo?","pubdate":"2014-01-10T13:27:42.917"
          },"hashtag":{
            "hashtag_id":2,"hashtag":"#voetbal","company_fk":3
          },"twitter_id":"0","user_screenname":"Ligula","user_name":"Ligula","message_fk":3,"hashtag_fk":2
        },{
          "message":{
            "text":"Duis sed nunc semper, volutpat urna et, volutpat diam.","company_fk":3,"image_url":"http://www.allfunnystuff.com/wp-content/uploads/2013/04/funny-baby-angry-punch.jpg","active":true,"author_id":"75675675","message_id":4,"author_picture":"http://www.drodd.com/images8/funny-face15.jpeg","author_name":"Curabitur","source":"TWITTER","createddatefriendly":"3 day(s) ago","message":"Suspendisse a sapien id lorem tincidunt imperdiet eget id velit.","pubdate":"2014-01-10T13:30:26.657"
          },"hashtag":{
            "hashtag_id":2,"hashtag":"#voetbal","company_fk":3
          },"twitter_id":"0","user_screenname":"Curabitur","user_name":"Curabitur","message_fk":4,"hashtag_fk":2
        }
      ]
    }

My javascript/Knockout code:

    function CompanyViewModel() {
        var self = this;
        self.name = ko.observable();
    }

    function TweetViewModel(item) {
        var self = this;
        self.user_screenname = ko.observable("");
        self.user_name = ko.observable("");
        self.message = ko.observable("");
        self.hashtag = ko.observable("");
        ko.mapping.fromJS(item, {}, self);
    }

    function ViewModel() {
        var self = this;
        self.Company = ko.observable(new CompanyViewModel());
        self.Tweets = ko.observableArray([new TweetViewModel()]);

        $.getJSON('/Data/company.json', function (data) {
            ko.mapping.fromJS(data, {}, self.Company());
        });

        $.getJSON('/Data/tweets.json', function (allData) {
            var mappedTweets = $.map(allData.value, function (item) {
                return new TweetViewModel(item)
            });
            self.Tweets(mappedTweets);

            console.log(self.Tweets())
        });
    }

    var vm = new ViewModel();

    ko.applyBindings(vm);

My HTML:

    <tbody data-bind="foreach: Tweets">
        <tr>
            <td data-bind="text: user_screenname"></td>
            <td data-bind="text: message().text"></td>
            <td data-bind="text: hashtag().hashtag"></td>
        </tr>
    </tbody>

Everything is working fine. But here is my question:

Why i DON'T need to "declare" the Message.Text observable to use it for databinding but i DO NEED to declare the user_screenname observable?

If i would remove the line:

        self.user_screenname = ko.observable("");

I get an error: user_screenname is not defined. As i use the mapping construction i would expect that user_screenname property is also automatically mapped to the viewmodel. Or am i doing something wrong?

Answer 1

You need to declare explicitly your user_screenname because one of your message in the returned data does not contain the user_screenname property so the mapping does not create it and your binding will break.

You can prefix your property with $data:

<td data-bind="text: $data.user_screenname"></td>` 

in this case the binding won't break if you don't have an user_screenname property so it will work without explicitly declaring the user_screenname.