Geeks With Blogs

News profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers

Donate Bitcoins

Check out Elapser from T3rse!
"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.

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

No comments posted yet.
Your comment:
 (will show your gravatar)


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