创建没有淘汰代码的淘汰视图模型答案

【问题标题】：Creating knockout viewmodels without knockout code in them创建没有淘汰代码的淘汰视图模型
【发布时间】：2015-10-01 15:31:08
【问题描述】：

创建一个没有任何淘汰代码的淘汰视图模型是否有意义？意味着根本没有可观察对象、订阅者或任何淘汰功能？

我有一些应用程序的常用功能，例如模式、闪光警报、通知、日期选择器...

我通常使用主视图模型通过其他视图模型访问它们：

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)

然后我可以在任何 viewModel 中使用以下内容：

mm.alert.show('Demo');

为什么我将它们保留为视图模型？它简化了事情。

我可以将它们保持在与视图模型相同的路径下
将来我可以决定对它们使用可观察或任何淘汰功能

【问题讨论】：

拥有没有剔除引用的“静态”视图模型并没有错。在这种特殊情况下，您的 MasterModel 看起来更像一个视图模型“控制器”。
有道理。我在文章 cmets “你最好保持你的组件与框架无关” 中的某处读过。如果有一次您需要它们位于库或特定于框架的结构中，您仍然可以定义一个简单的 augment/transform 函数来相应地修改它们...

标签： knockout.js knockout-3.0

【解决方案1】：

如果您只是想创建一种方法来减少警报或其他与 ViewModel 无关的代码的重复，那么您最好只创建一个具有这些辅助函数的“实用程序”类。

但是，如果您想减少代码，因为您的视图模型有很多共同点，那么我认为使用继承是更好的途径。

这是我在一个项目中所做的简化示例：

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

【讨论】：