Asp.Net Mvc Render Partial View With Knockout

Question

I use Web Api and Knockout.js in my project. I want to try like this: if I click the "Home" I want to refresh just main div. So I write this code.

My script in layout.cshtml

<script type="text/javascript">
    $(document).ready(function () {

        ko.applyBindings(new TalesViewModel());//First load the code is runnig and load the main div
        function TalesViewModel() {
            var self = this;
            self.tales = ko.observableArray();     
            $.getJSON("/api/tales/", self.tales);

        }

        $('#home').click(function () {
            var Tale = function (TaleName, Content, VoicePath, Tales) {
                self = this;
                self.TaleName = TaleName;
                self.Content = Content;
                self.VoicePath = VoicePath;
            }

            var mapping = {
                'tales': {
                    create: function (options) {
                        return new Tale(options.data.TaleName, options.data.Content,
                          options.data.VoicePath);
                    }
                }
            }

            var data = $.getJSON("/api/tales/", Tale);
            var viewModel = ko.mapping.fromjs(data, mapping);
            ko.applyBindings(viewModel);

        })
    })
</script>

I want to refresh this place

<div id="main">
    @RenderBody()
</div>

TaleList.cshtml (PartialView)

<div>
<ul data-bind="foreach: tales">
    <li>
        <div>
            <div>Masal Adı</div>
            <span data-bind="text: $data.TaleName"></span>
        </div>
        <div>
            <div>İçerik</div>
            <span data-bind="text: $data.Content"></span>
        </div>
        <div>
            <div>Ses Dosyası</div>
            <span data-bind="text: $data.VoicePath"></span>
        </div>
    </li>
</ul>

When I clicked Home main div is refresh but no data in here. I think I have to use Knockout something but I don't know how can I do it.

I hope I can explain. Thanks all replies.

Update

If I check with firebug I see this error "TypeError: Object # has no method 'fromjs'"

Update2

I added my first knockout code when I load the project.

Answer 1

This is what you need to do:

Create a js object

var Tale = function (TaleName, Content, VoicePath, Tales) {
    self = this;
    self.TaleName = TaleName;
    self.Content = Content;
    self.VoicePath = VoicePath;
}

Create a mapping to convert to your js objects

var mapping = {
    'tales': {
        create: function(options) {
            return new Tale(options.data.TaleName, options.data.Content,     
              options.data.VoicePath);
        }
    }
}

Check that your data matches something like below, checking the names match as below:

var data = {"tales" : [{"TaleName": "T1", "Content":"c1", "VoicePath":"v1"}, {"TaleName": "T2", "Content":"c2", "VoicePath":"v2"}]}
var viewModel = ko.mapping.fromJS(data, mapping);

Apply the bindings

ko.applyBindings(viewModel);

Here is a working fiddle with mimicked data

http://jsfiddle.net/dxJpc/1/

Update

You are mixing a combination of getJson and ajax , you only need one.

This can be replaced: (With Ajax)

        $.ajax({
            type: 'GET',
            url: '/Pages/TaleList/',
            contentType: 'application/html; charset=utf-8',
            dataType: 'html'
        })
        .success(function (data) {
            alert("okey!")
            var viewModel = ko.mapping.fromJS(data, mapping);
            ko.applyBindings(viewModel);
        })
        .error(function (req, status, error) {
            alert("Error!Occured")
        })

With getJSON:

 var data = $.getJSON("/api/tales/", Tale);
 var viewModel = ko.mapping.fromJS(data, mapping);
 ko.applyBindings(viewModel);  

Update 3

If you are loading your initial load as you have changed it to, you can simply put this in your on click event:

   $('#home').click(function () {
        ko.applyBindings(new TalesViewModel());
    })

Update 4

Declare the view model in the document ready.

  $(document).ready(function () {
    var viewModel = new TalesViewModel();
    ko.applyBindings(viewModel);

Then change your click to this:

  $(document).ready(function () {
     viewModel = new TalesViewModel();