重写 Knockout View-Model 函数

Question

我在我的应用程序中使用了敲除和 backbone。我的测试-view.js 看起来像这样：

define([
  "knockout",
  "./base",
  "./../viewmodels/test-vm",
  "text!./../templates/test-template.html"
],

function(ko, BaseView, TestViewModel, template) {

  var TestView = BaseView.extend({
    template: template,

    initialize: function() {
      this.viewModel = new TestViewModel();
    },

    render: function(){
      this.$el.html(template);
      return this;
    },

    postRender: function() {
      ko.applyBindings(this.viewModel, this.el);
    }
  });

  return TestView;
});

测试-template.html:

<button class="btn"  data-bind="click: test">test</button>

和test-vm.js如下：

define([],
  function() {

    function TestViewModel() {
      var self = this;

      self.test = function () {
        alert("in test view model");
      };
    }

    return TestViewModel;
  });

当我点击按钮时，self.test 被调用。我的问题是如何在另一个文件中扩展 TestViewModel 并覆盖测试函数来做一些特定的事情？提前致谢！

Answer 1

我看不出有任何理由您不能使用此处所述的常用 "Classical inheritance with Object.create" 方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

// Define the base class
var TestViewModel = function () {
  this.sharedProperty = true;
};

TestViewModel.prototype.test = function() {
  log("testing TestViewModel");
};

// Define the extended class
var ExtendedTestViewModel = function() {
  TestViewModel.call(this);
};

// Copy the prototype and reset the constructor
ExtendedTestViewModel.prototype = Object.create(TestViewModel.prototype);
ExtendedTestViewModel.constructor = ExtendedTestViewModel;

// Override the inherited `test` function
ExtendedTestViewModel.prototype.test = function() {
  // To call the base method: 
  // (skip this if you want to completely override this function)
  TestViewModel.prototype.test.call(this);
  
  // Add functionality:
  log("testing ExtendedTestViewModel");
};

// Create an instance
var etvm = new ExtendedTestViewModel();

// This will log both the inherited message, as well as the extended message
etvm.test();

// ExtendedTestViewModel has all properties that are in TestViewModel
log(etvm.sharedProperty);

// utils
function log(msg) {
  var pre = document.createElement("pre");
  pre.appendChild(document.createTextNode(msg));
  document.body.appendChild(pre);
};

重写 Knockout View-Model 函数

Overriding Knockout View-Model function

overriding

extend

backbone.js

knockout.js