c# class to knockout.js mapping

Question

i would like to convert each object from my class to observablearray,

My model is something like this :

public class Project
    {
        public string Soid { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string ProjectTitle { get; set; }

        private List<SelectedMembersForTestimonialsModel> _selectedMembersForProject;

        public List<SelectedMembersForTestimonialsModel> SelectedMembersForProject
        {
            internal set { _selectedMembersForProject = value; }
            get { return _selectedMembersForProject ?? (_selectedMembersForProject = new List<SelectedMembersForTestimonialsModel>()); }
        }
}

TO convert whole class to observablearray,, i tried like this :

var RatingAndTestimonials = function () {
    //Make the self as 'this' reference
    var self = this;

    self.projects = ko.observableArray([]);

Load Data from server to self.projects
//Function to Read All Modules datas
    function GetRatingandTestimonialsData(module) {
        $.ajax({
            type: "POST",
            url: "Home.aspx/GetRatingandTestimonialsInfos",
            data: "{module : '" + module + "'}",
            dataType: "json",
            contentType: "application/json",
            success: function (response) {
                self.PageLoading = ko.observable("none");
                $.each(response.d, function (i, data) {
                    self.projects(data.Projects);
                                    });
            }

        });
    }

to convert each of property from project to observablearry, ( specially nested list called :SelectedMembersForProject )

i wrote following things using ko.mapping

var rt = new RatingAndTestimonials(); 
ko.applyBindings(ko.mapping.fromJS(rt));

but it is not working, can anyone solve my problem?

Answer 1

For a screen I'm working on I pass the model to my .cshtml view first, so:

@model Your.Namespace.Project

Then, in the <script> on the .cshtml view

    // serialize model to json
    var data = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));

    // "Project" being the name of the knockout VM
    var vm = new Project(data);
    ko.applyBindings(vm);

    // definition of project knockout VM
    function Project(data) {
        // Data
        var self = this;
        ko.mapping.fromJS(data, {}, self);
    }

Now all of your properties are observables, and your lists are observable arrays

Answer 2

Whilst you haven't said what exactly is wrong, you are not adding each project to your view model's array, you are setting the property to that project. You need to use push to add each project to the array:

$.each(response.d, function (i, data) {
    self.projects.push(data.Projects);
});