Question

I’m new to the MVVM design pattern and as I’m building some samples I keep running into the question where do I put javascript code to initialize components on page? Do I include them in the view model, create simple functions or create different object?

For example say I have a drop down on a form that needs to be populated via jquery ajax? Where is the best place to put that code?

var viewModel = function() {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
    init:function () {
        //Load components here
    }
};

$(document).ready(function () {
    viewModel.init();
}

Answer 1

With knockout, you should use the self method. And to answer your question, you should have some initialization code like:

var viewModel = function() {
    var self = this;
    self.firstName = ko.observable(first);
    self.lastName = ko.observable(last);
    self.retrieveData = function() {
           $.ajax({
              url: "test.html",
              success: function(data) {
                 self.firstName(data.firstName);
                 self.lastName(data.lastName);
              }
            });
    };
};

$(document).ready(function () {
   var vm = new viewModel(); 
   vm.retrieveData();
}