CODEWITHSUNDEEP
knockout.jsknockout-3.0
Alvaro
Alvaro

Reputation: 41605

Creating knockout viewmodels without knockout code in them

Does it make any sense to create a knockout viewmodel without any knockout code in it? Meaning no observables, subscribers or any knockout functions at all?

I have some common functionality for the application such as modals, flash alerts, notifications, datepickers...

I usually access them through other viewmodels by using a master view model:

var MasterModel = function(){
    this.comments = new commentsViewModel().init();
    this.equipment = new equipmentViewModel().init();

    //fake viewmodels
    this.notification = new notificationViewModel().init();
    this.alert = new alertsViewModel().init();
};

var mm = new MasterModel();

ko.applyBindings(mm)

Then I can use the following from any viewModel:

mm.alert.show('Demo');

Why do I keep them as viewmodels? It simplifies things.

Upvotes: 2

Views: 105

Answers (1)

Jeff
Jeff

Reputation: 2738

If you're just trying to create a way to reduce duplication of code for alerts or other things not related to the ViewModel then you'd probably be better to just create a "utility" class that has those helper functions.

However, if you want to reduce code because your view models have a lot in common, then I think using inheritance is a better route.

Here's an simplified example of what I've done in a project of mine:

function baseObj(args) {
  if (this instanceof baseObj === false) return new baseObj(args);
  return this.memberVars(args);
}

baseObj.prototype = function() {
  var defaults = {
    viewOnly: false
  };

  function memberVars(args) {
    var settings = $.extend({}, defaults, args);
    var id = ko.observable();
    var readOnly = ko.observable(settings.viewOnly ? true : false);

    var isCreated = ko.pureComputed({
      read: function() {
        return id() ? true : false;
      },
      deferEvaluation: true
    });

    Object.defineProperty(this, "id", {value: id,enumerable: true});
    //FYI: these are not enumerable because I don't want them to
    //end up in the JSON.
    Object.defineProperty(this, "readOnly", {value: readOnly});
    Object.defineProperty(this, "isCreated", {value: isCreated});
    return this;
  }

  function init(data) {
    console.log("base init");
    if (data) {
      this.id(data.id);
    }

    return this;
  }

  function saveObj() {
    console.log("saving " + this.constructor.name + "(" + this.id() + ")");
  };

  function deleteObj() {
    console.log("deleting " + this.constructor.name+ "(" + this.id() + ")");
  };

  Object.defineProperty(baseObj.prototype, "memberVars", {value: memberVars});
  Object.defineProperty(baseObj.prototype, "init", {value: init});
  Object.defineProperty(baseObj.prototype, "saveObj", {value: saveObj});
  Object.defineProperty(baseObj.prototype, "deleteObj", {value: deleteObj});
  return baseObj.prototype;
}();

function personObj(args) {
  if (this instanceof personObj === false) return new personObj(args);
  return this.memberVars(args);
}

personObj.prototype = function setProto(base) {
  function memberVars(settings) {
    base.memberVars.call(this, settings);

    var firstName = ko.observable("");
    var lastName = ko.observable("");

    var fullName = ko.pureComputed({
      read: function() {
        var result = "";
        var tmpFirst = firstName();
        var tmpLast = lastName();

        if (tmpFirst)
          result += tmpFirst;

        if (tmpLast)
          result += " " + tmpLast;

        return result;
      },
      deferEvaluation: true
    });

    Object.defineProperty(this, "firstName", {value: firstName,enumerable: true});
    Object.defineProperty(this, "lastName", {value: lastName});
    Object.defineProperty(this, "fullName", {value: fullName});
    return this;
  }

  function init(data) {
    base.init.call(this, data);
    if (data) {
      this.firstName(data.firstName || "");
      this.lastName(data.lastName || "");
    }
  }

  var obj = Object.create(base);
  Object.defineProperty(obj, "constructor", {value: personObj});
  Object.defineProperty(obj, "memberVars", {value: memberVars});
  Object.defineProperty(obj, "init", {value: init});
  return obj;
}(baseObj.prototype);

Plunk: http://plnkr.co/9uNu1yJSsUoTVLgnBtFZ

Upvotes: 0

Related Questions