javascript - How to initialize knockoutjs view model with .ajax data - Stack Overflow

admin 管理员组

文章数量: 1086019

The following code works great with a hardcoded array (initialData1), however I need to use jquery .ajax (initialData) to initialize the model and when I do the model shows empty:

    $(function () {

        function wiTemplateInit(winame, description) {
            this.WIName = winame
            this.WIDescription = description
        }

        var initialData = new Array;

        var initialData1 = [
            { WIName: "WI1", WIDescription: "WIDescription1" },
            { WIName: "WI1", WIDescription: "WIDescription1" },
            { WIName: "WI1", WIDescription: "WIDescription1" },
        ];
        console.log('gridrows:', initialData1);

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{UserKey: '10'}",
            url: "WIWeb.asmx/GetTemplates",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    initialData.push(new wiTemplateInit(data.d[i].WiName,data.d[i].Description));
                }
                //console.log('gridrows:', initialData);
                console.log('gridrows:', initialData);
            }
        });

        var viewModel = function (iData) {   
            this.wiTemplates = ko.observableArray(iData);

        };

        ko.applyBindings(new viewModel(initialData));

    });

I have been trying to work from the examples on the knockoutjs website, however most all the examples show hardcoded data being passed to the view model.

The following code works great with a hardcoded array (initialData1), however I need to use jquery .ajax (initialData) to initialize the model and when I do the model shows empty:

    $(function () {

        function wiTemplateInit(winame, description) {
            this.WIName = winame
            this.WIDescription = description
        }

        var initialData = new Array;

        var initialData1 = [
            { WIName: "WI1", WIDescription: "WIDescription1" },
            { WIName: "WI1", WIDescription: "WIDescription1" },
            { WIName: "WI1", WIDescription: "WIDescription1" },
        ];
        console.log('gridrows:', initialData1);

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{UserKey: '10'}",
            url: "WIWeb.asmx/GetTemplates",
            success: function (data) {
                for (var i = 0; i < data.d.length; i++) {
                    initialData.push(new wiTemplateInit(data.d[i].WiName,data.d[i].Description));
                }
                //console.log('gridrows:', initialData);
                console.log('gridrows:', initialData);
            }
        });

        var viewModel = function (iData) {   
            this.wiTemplates = ko.observableArray(iData);

        };

        ko.applyBindings(new viewModel(initialData));

    });

I have been trying to work from the examples on the knockoutjs website, however most all the examples show hardcoded data being passed to the view model.

• javascript
• knockout.js

Share Improve this question Follow asked Jan 13, 2012 at 20:27 Peter Rackauskas Jr.Peter Rackauskas Jr. 1111 silver badge22 bronze badges 4

• Have you debugged the network transmission to see what es back? Check to see if anything es back. If it does, what shape is the data? Is it the same as your hard coded date? Is there an error? – John Papa Commented Jan 13, 2012 at 20:37
• "however most all the examples show hardcoded data being passed to the view model". Are you sure about that? – kamranicus Commented Jan 13, 2012 at 20:52
• John-I debugged and checked the array with console.log, the data is getting to the client. Both arrays are same syntax with no errors. – Peter Rackauskas Jr. Commented Jan 13, 2012 at 21:45
• sub- been there, I just didn't find those examples useful since they are not shown with any UI or model flow plexity. – Peter Rackauskas Jr. Commented Jan 13, 2012 at 21:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

make sure your "WIWeb.asmx/GetTemplates" returns json array of objects with exact structure {WIName : '',WIDescription :''} and try using something like this

    function wiTemplateInit(winame, description)
    {
        var self = this;
        self.WIName = winame;
        self.WIDescription = description;
    }

    function ViewModel()
    {
        var self = this;
        self.wiTemplates = ko.observableArray();

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{UserKey: '10'}",
            url: "WIWeb.asmx/GetTemplates",
            success: function (data)
            {
                var mappedTemplates = $.map(allData, function (item) { return new wiTemplateInit(item.WiName, item.Description) });
                self.wiTemplates(mappedTemplates);

            }
        });
    }

    var vm = new ViewModel();

    ko.applyBindings(vm);

If you show us your browser log we can say more about your problem ( Especially post and response ). I prepared you a simple example to show how you can load data with ajax , bind template , manipulate them with actions and save it.

Hope this'll help to fix your issue : http://jsfiddle/gurkavcu/KbrHX/

Summary :

 // This is our item model 
function Item(id, name) {
   this.id = ko.observable(id);
   this.name = ko.observable(name);
}

// Initial Data . This will send to server and echo back us again
var data = [new Item(1, 'One'),
            new Item(2, 'Two'),
            new Item(3, 'Three'),
            new Item(4, 'Four'),
            new Item(5, 'Five')]

// This is a sub model. You can encapsulate your items in this and write actions in it
var ListModel = function() {    

   var self = this;    
   this.items  = ko.observableArray();
   this.remove = function(data, parent) {
        self.items.remove(data);
   };
   this.add    = function() {
        self.items.push(new Item(6, "Six"));
   };
   this.test   = function(data, e) {
       console.log(data);
       console.log(data.name());
   };
   this.save   = function() {        
       console.log(ko.mapping.toJSON(self.items));
   };   
}

// Here our viewModel only contains an empty listModel
function ViewModel() {
    this.listModel = new ListModel();
};

var viewModel = new ViewModel();

$(function() {
    $.post("/echo/json/", {
        // Data send to server and echo back
        json: $.toJSON(ko.mapping.toJS(data))
    }, function(data) {

    // Used mapping plugin to bind server result into listModel
    // I suspect that your server result may contain JSON string then 
    // just change your code into this
    // viewModel.listModel.items = ko.mapping.fromJSON(data); 

    viewModel.listModel.items = ko.mapping.fromJS(data);

    ko.applyBindings(viewModel);
});
})

本文标签： javascriptHow to initialize knockoutjs view model with ajax dataStack Overflow