参考组件

Question

在node中使用knockout.js，如何获取对从模板调用的子VM组件的引用？

插图

我有一个问题模型，VM，包含一个自定义资源组件，它有各自的模型和VM。资源VM注册自定义组件并接收资源模型对象作为参数，该参数由父问题模型构建。此构造的资源作为参数传递给模板：

QuestionModel.js

 this = new QuestionModel(...);
 this.resource = new ResourceModel(some data);

问题-template.html

<div data-bind="foreach: { data: questions, as: 'question' }">
    <!-- question related -->
    <resource params="resource: question.resource"></resource>
</div>

ResourceVM.js

define(function(require, exports, module) {

    var ko = require('knockout');

    var ResourceViewModel = function ResourceViewModel(params) {
        this.resource = params.resource;
        this.somethingSpecific = function() {
            return 'some value manipulate from this model';
        }
    }

    ko.components.register('resource', {
        viewModel: {
            createViewModel: function(params, componentInfo) {
                return new ResourceViewModel(params);
             }
         },
         template: {
             require: 'text!/resource-template.html'
         }
    });

    return ResourceViewModel;
});

我希望能够调用Resource VM的功能（例如question.resourceVM.somethingSpecific（））。

获取对组件子项的引用的正确方法是什么？

我能想到的唯一解决方案是使用参数传递父对象并将其从child扩展，这显然很糟糕。

Answer 1

您的QuestionModel已经可以访问this.resource，因此前进的方向可能是通过数据模型而不是通过视图模型。将somethingSpecific()作为QuestionModel或ResourceModel而不是ResourceViewModel的属性可以很好地解决问题。

我认为操纵数据是持有数据的实体的责任; ResourceViewModel的工作只是在数据模型和DOM之间提供粘合剂。

var QuestionModel = function QuestionModel() {
  this.somethingSpecific = function somethingSpecific() {
    this.resource.doStuff();
  };
};

this = new QuestionModel();
this.resource = new ResourceModel(some data);

然后，您可以让resource组件访问question而非儿童resource：

var ResourceViewModel = function ResourceViewModel(params) {
    this.question = params.question;
    this.resource = this.question.resource;
}