【问题标题】:Accessing viewModel functions by prototype通过原型访问 viewModel 函数
【发布时间】:2012-12-12 07:24:51
【问题描述】:

我正在尝试为我的视图模型创建一个通用容器,以便可以在没有特定视图模型知识的情况下将常用方法应用于各种对象。容器和包含的对象如下所示:

var containedViewModel = function() {
  var self = this;
  self.id = ko.observable();
    ...
  self.doSomething = function() {
  alert('here');
  };

}

var ContainerModel = function(cRoot, cModel, cName) {
  var self = this;

  self.rootModel  = cRoot;                       // Root view model
  self.viewName   = cName;                       // viewModel container name
  self.refModel   = cModel;                      // viewModel reference
  self.viewModel  = ko.observable();             // Single view model
  self.viewModels = ko.observableArray();        // Array of view models

  self.init = function(rootModel) {
    self.viewModel = new self.refModel();
  } 
  self.doSomething = function() {
    self.rootModel.doSomeThing();    // This works
    self.refModel.doSomeThing();     // This does not work
    self.viewModel.doSomeThing();    // This does not work as well
  } 

}

容器将通过如下调用创建:

var ParnentModel = function() {
  var self = this;
  self.id = ko.observable();
    ...
  self.container = new ContainerModel(self, containedViewModel, 'modelName');
    ...
  self.doSomething = function() {
  alert('here');
  };
};

在此示例中,rootModel 函数访问工作正常,因为实际的视图模型已创建并传递给容器。使用 'new self.refModel()' 和 'self.rootModel.doSomeThing()' 似乎可以按预期工作。当我尝试使用'self.viewModel.doSomeThing();'淘汰赛抱怨它不是一个函数。

是否可以通过引用 viewModel 来访问 viewModels 函数。

任何帮助将不胜感激。

【问题讨论】:

  • 我很高兴能提供帮助。如果您愿意,可以接受答案。

标签: function knockout.js viewmodel


【解决方案1】:

你快到了。在代码中查看我的 cmets。

var containedViewModel = function() {
  var self = this;
  self.id = ko.observable();
  self.doSomething = function() {
    alert('contained');
  };
  // I would prefer to have return self here
};

var ContainerModel = function(cRoot, cModel, cName) {
  var self = this;

  self.rootModel  = cRoot;                       // Root view model
  self.viewName   = cName;                       // viewModel container name
  self.refModel   = cModel;                      // viewModel reference
  self.viewModel  = ko.observable();             // Single view model
  self.viewModels = ko.observableArray();        // Array of view models

  self.init = function(rootModel) {
    // you meant this, right?
    self.viewModel(new self.refModel());
  }; 
  self.doSomething = function() {
    self.rootModel.doSomething();    // This works
    //self.refModel.doSomeThing();     // This does not work
    // need to unwrap the value, fixed typo
    self.viewModel().doSomething();    // This does not work as well
  };
};

var ParnentModel = function() {
  var self = this;
  self.id = ko.observable();
  self.container = new ContainerModel(self, containedViewModel, 'modelName');
  // missing call to init
  self.container.init();
  self.doSomething = function() {
      alert('parent');
  };
};

// execution
var p = new ParnentModel();
p.container.doSomething();

http://jsbin.com/arezew/1/edit

【讨论】:

    【解决方案2】:

    我认为你应该在像这样传递给 ContainerModel 时创建包含模型的实例:

    self.container = new ContainerModel(self, new containedViewModel, 'modelName');
    

    【讨论】:

    • 传入 viewModel 违背了容器的目的。我需要将构造函数传递到容器中,以允许我在容器内创建模型,并在容器构建后创建视图模型数组。如果您在“新”分配中传递 viewModel,则会抱怨没有构造函数。问题是使用传递的构造函数构造的对象不能用于访问 viewModel 函数。
    • 如果我将构造函数和视图模型都传递到容器中,例如 ...可以使用视图模型来访问函数,让我感到困惑的是为什么我不能使用容器中的构造函数创建的模型来访问函数。
    猜你喜欢
    • 1970-01-01
    • 2016-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多