CODEWITHSUNDEEP
javascriptasp.nethtmlknockout.js
skmasq
skmasq

Reputation: 4521

Why isn't my viewModel working

I'm struggling with this 3 days and can't get my mind around why the first viewModel is working but second isn't , it even doesn't allow me console.log() anything.

My view Models and ko bindings:

// KO View Models
var indexViewModel = {
    item: ko.observableArray([]),
    cat: ko.observableArray([]),
    loadcontent: function () {
        alert("inside index function");
        $.ajax({
            url: '/api/item/all',
            dataType: 'json',
            success: function (data) {
                var getArray = [];
                $.each(data, function (index, item) {
                    getArray[index] = item;
                });
                indexViewModel.item(getArray);
            }
        });
        $.ajax({
            url: '/api/category/all',
            dataType: 'json',
            success: function (data) {
                var getArray = [];
                $.each(data, function (index, item) {
                    getArray[index] = item;
                });
                indexViewModel.cat(getArray);
            }
        });
    }
};
var dataReal = null;
var itemViewModel = {
    item: ko.observableArray([]),
    loadcontent: function (getID) {
        alert(getID);
        $.ajax({
            url: '/api/item/details/' + getID,
            dataType: 'json',
            success: function (data) {
                var getArray = [];
                $.each(data, function (index, item) {
                    getArray[index] = item;
                });
                itemViewModel.item(getArray);
                dataReal = data;
            },
            error: function (xhr, status) {
                switch (status) {
                    case 404:
                        alert('File not found');
                        break;
                    case 500:
                        alert('Server error');
                        break;
                    case 0:
                        alert('Request aborted');
                        break;
                    default:
                        alert('Unknown error ' + status);
                }
            }
        });
    }
};

var mainViewModel = {
    indexPage: indexViewModel,
    itemPage: itemViewModel
};

ko.applyBindings(mainViewModel);

My working HTML:

<div id="index-content" data-bind="init: mainViewModel.indexPage.loadcontent(), with: mainViewModel.indexPage">
    <div class="item-list" data-bind="foreach: item">
        <div class="item-container clearfix">
            <div class="item-content clearfix">
                <div class="title" data-bind="text: Title">
                </div>
                <div class="left-side clearfix">
                    <div class="item-image" data-bind="style: { backgroundImage: 'url(content/u/'+Image+')' }">
                    </div>
                    <div class="item-descr">
                        <div class="body" data-bind="text: Body">
                        </div>
                        <div class="item-more-details">
                            Vairāk...
                        </div>
                    </div>
                </div>

And the HTML witch even ignores my console.log() calls:

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int id = ViewBag.id;
}

<div id="item-details-content">
    <input type="hidden" id="item-id" value="@id" data-bind=""/>
    <div class="item-list" data-bind="init: itemPage.loadcontent(@id), with: itemPage.item">
        <div class="item-container clearfix" data-bind="init: console.log($root)">
            <div class="item-content clearfix">
                <div class="title" data-bind="text: Title">
                </div>
                <div class="left-side clearfix">
                    <div class="item-image" data-bind="style: { backgroundImage: 'url(content/u/'+Image+')' }">
                    </div>
                    <div class="item-descr">
                        <div class="body" data-bind="text: Body">
                        </div>
                        <div class="item-more-details">
                            Vairāk...
                        </div>
                    </div>
                </div>

Questions

  1. What am I doing wrong?
  2. Where is syntax errors?
  3. How can I get console.log() working there?
  4. Maybe there is an alternative to my problem, maybe I'm misunderstanding the concept of KO.js?

Conclusions

  1. I know there is data inside mainViewModel.itemPage.loadcontent($.ajax(data)) because alert() shows it, but it doesn't pass the value to item!
  2. I'm a newbie, total newbie, and if I thought I'am somewhat a decent programmer now I think I am total dumb ass and I am starting to hate KO.js, but I need it very badly!
  3. NOTE: You can see in debug section that index page works just fine.

DEBUG PLACE

Here is published web application

And here is single item page

THANK YOU

Thanks everyone for helping me, I was so frustrated that I even didn't see any more the obvious, thanks again! Cheers!

Upvotes: 0

Views: 255

Answers (2)

John Papa
John Papa

Reputation: 22338

1) At first glance, I noticed your HTML bindings are referring to mainViewModel. For example:

data-bind="init: mainViewModel.itemPage.loadcontent(@id), with: mainViewModel.itemPage.item

should likely be

data-bind="init: itemPage.loadcontent(@id), with: itemPage.item

You are already bound to mainViewModel

2) For debugging, use this to see what you are bound to in the view.

<pre data-bind="text:ko.toJSON(yourViewModelGoesHere, null, 2)"></pre>

3) The data being returned is not an array, though you are treating it as such.

$.ajax({
    url: '/api/item/details/' + getID,
    dataType: 'json',
    success: function (data) {
        var getArray = [];
        $.each(data, function (index, item) {
            getArray[index] = item;
        });
        itemViewModel.item(getArray);
        dataReal = data;
    },

If you create a sample at http://jsfiddle.net we can help you more.

Upvotes: 1

twoflower
twoflower

Reputation: 6830

  1. Within the data-bind elements, you are referring to your model relative the the object you specified in the applyBindings() function. In your case, you called applyBindings(mainViewModel), so in the bindings themselves, you refer to its properties, not to mainViewModel itself.

  2. In your non-working HTML, <div class="item-container clearfix" data-bind="console.log($root)"> seems suspicious. What kind of binding is this? It doesn't specify any particular property to bind.

  3. Use your browser's developer tools (Firebug in Firefox, Developer Tools in Chrome/IE...) to see the syntax errors. If there are problems with bindings, you will see them there.

Upvotes: 1

Related Questions