Geeks With Blogs

News profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.

Donate Bitcoins

My Gooroo profile


Programming and Learning from SD

I’m refactoring code to use a prototypal inheritance instead of the Revealing Module Pattern. I’m using TypeScript for inheritance, seeing what it kicks out and copying and modifying that (that’d be worth a blog post). There were a few modifications that I needed to make.

Bonus: this is a good video about JavaScript inheritance.

Subscribe and Computed need a different approach. See http://stackoverflow.com/questions/14120507/using-prototype-for-knockoutjs-computed-properties. This code snippet is from Anders.

ViewModel = function() {
   this.fullName = ko.computed(this.getFullName, this);
};

ViewModel.prototype = {
   getFullName: function() {
      return this.firstName() + " " + this.lastName();
   }
};

A sample of a view model after the refactor:

TestVm = (function (_super) {
    "use strict";
    __extends(TestVm, _super);
   TestVM = function (){
        // constructor
       // setup properties for binding
       this.Title = ko.observable('Hello!');
       this.Movies = ko.observableArray();
       this.SelectedMovie = ko.observable();
       
       // handle observable subscribes
       this.SelectedMovie.subscribe(this.subscribeSelectedMovie, this);
       
       // handle computed
        this.NewestMovie = ko.computed(this.computedNewestMovie, this);
   }
  // methods
 TestVM.prototype.Init = function(){
    // have to use call to send this as the context.
     _super.Init.call(this);
     // save self, so it can be used inside the complete
     var self = this;
     dataService.AdministrationDataService.GetMovies()
     .done(function (results) {
       // watch out 'this' is no longer 'this'!
       self.Movies(results);
     });
  };
  TestVm.prototype.subscribeSelectedMovie = function (movie) {
    toastr.info(movie.Name + " selected");
  };
  TestVm.prototype.computedNewestMovie = function (){
     // add real code to find the newest movie
     return this.Movies()[0];
  };
}(ParentVm));
 
Events also need the view model passed in through the html binding syntax. Here’s an example using Wijmo’s slider. Notice the OnSliderChanged event linking.
  <div id="slider" data-bind="wijslider: {
        orientation: 'horizontal',
        range: false,
        min: HistoryMin,
        max: HistoryMax,
        step: 1,
        value: HistoryIndex,
        change: function () { OnSliderChanged($data) },
        stop: function () { OnSliderStopped($data) }
    }">
TestVm.prototype.OnSliderChanged = function (vm){

    // use vm instead of this

};
Posted on Wednesday, July 17, 2013 4:20 PM | Back to top


Comments on this post: Knockout with Prototype and Inheritance

# re: Knockout with Prototype and Inheritance
Requesting Gravatar...
I have an issue with Knockout where I prototype a user object where the observable properties of my object seem to be overwritten by the last occurrence.

Therefore I cannot use the same object more than once otherwise it will be overwritten.

Although this is hard to explain, see my fiddle.

MCXBullionTips.in

What am I doing wrong? (or is this a bug in Knockout?) How can I fix the problem.
Left by Boss on Dec 23, 2015 12:09 PM

# re: Knockout with Prototype and Inheritance
Requesting Gravatar...
Unfortunately, your Fiddle link wasn't in the comment. Could you add another comment with the link?

Left by Kevin on Dec 28, 2015 8:32 AM

Your comment:
 (will show your gravatar)


Copyright © Aligned | Powered by: GeeksWithBlogs.net | Join free