CODEWITHSUNDEEP
javascriptknockout.js
Mike Cole
Mike Cole

Reputation: 14713

Calling Knockout function from outside ViewModel

In my specific example, there are several different widgets that have their own encapsulated ViewModel. I need a global Save button that saves each individual ViewModel. I can't seem to figure out how to call functions on the individual ViewModels.

Example - how can I call the Save function on each ViewModel: http://jsfiddle.net/sNSh2/4/

var ViewModel1 = function() {
    var self = this;
    self.firstName = ko.observable('');
    self.lastName = ko.observable('');

    self.firstName('John');
    self.lastName('Doe');

    self.Save = function () {
        alert(ko.toJSON(self));
    };
};
ko.applyBindings(new ViewModel1(), document.getElementById("person"));

var ViewModel2 = function() {
    var self = this;
    self.subscriptionLevel = ko.observable('');

    self.subscriptionLevel('premier');

    self.Save = function () {
        alert(ko.toJSON(self));
    };
};
ko.applyBindings(new ViewModel2(), document.getElementById("subscription"));

$('#save').on('click', function() {

});

Upvotes: 5

Views: 14565

Answers (3)

user1375096
user1375096

Reputation:

I don't understand your problem, why not simply hold a reference of your model object?

$(function() {
  ...
  var m1 = new ViewModel1();
  ko.applyBindings(m1, document.getElementById("person"));

  ...
  var m2 = new ViewModel2();
  ko.applyBindings(m2, document.getElementById("subscription"));

  $('#save').on('click', function() {
    m1.Save();
    m2.Save();
  });
});

If you really have problem to get references of all model objects (maybe defined in isolated js files), ko provided way to get context object out from associated DOM object. You can still do this:

ko.contextFor(document.getElementById("person")).$data.Save();
ko.contextFor(document.getElementById("subscription")).$data.Save();

Upvotes: 15

Nathan Fisher
Nathan Fisher

Reputation: 7941

Knockout has basic pub/sub functionality. try this on for size jsFiddle

var postbox = ko.observable();

var ViewModel1 = function() {
    var self = this;
    self.firstName = ko.observable('');
    self.lastName = ko.observable('');

    self.firstName('John');
    self.lastName('Doe');

    self.Save = function () {
        alert(ko.toJSON(self));
    };
    postbox.subscribe(function(newValue){
        self.Save();
    }, self, 'save');
};
ko.applyBindings(new ViewModel1(), document.getElementById("person"));

var ViewModel2 = function() {
    var self = this;
    self.subscriptionLevel = ko.observable('');

    self.subscriptionLevel('premier');

    self.Save = function () {
        alert(ko.toJSON(self));
    };

    postbox.subscribe(function(newValue){
        self.Save();
    }, self, 'save');
};
ko.applyBindings(new ViewModel2(), document.getElementById("subscription"));

$('#save').on('click', function() {
    postbox.notifySubscribers(null, "save");
});

Upvotes: 1

Tuan
Tuan

Reputation: 5412

You just need to instantiate your ViewModel1 and ViewModel2 functions:

$('#save').on('click', function() {
   var vm1 = new ViewModel1(),
       vm2 = new ViewModel2();

   vm1.SayHi();
   vm2.SayHi();
});

Upvotes: 0

Related Questions