Knockout.js 从另一个组件访问组件的数据

我想从“第二个组件”获取“第一个组件”的viewModel，并同步这两个组件的self.prop。我使用淘汰库。这是我的密码：

ko.components.register('first-component', {
    template: '<strong><span data-bind="text: prop"></span></strong>',
    viewModel: function(params){
        var self = this;

        self.prop = ko.observable(params.initialText);
    }
});

ko.components.register('second-component', {
template: '<div><input type="text" data-bind="value: prop">' 
          + '<button data-bind="click: foo">Click Me</button></div>',
viewModel: function(params){
        var self = this;

        self.prop = ko.observable(params.initialText);
        self.foo = function(){
        // HELP ME! I want to get viewModel of 'first-component' and 
        // synchronize self.prop for both components
            if(ko.components.isRegistered("first-component")){
            //...???

            }
        }
    }
});

ko.components.register（'first-component'{
模板：“”，
viewModel:函数（参数）{
var self=这个；
self.prop=ko.observable（参数初始文本）；
}
});
ko.components.register（'second-component'{
模板：“”
+“点击我”，
viewModel:函数（参数）{
var self=这个；
self.prop=ko.observable（参数初始文本）；
self.foo=函数（）{
//帮帮我！我想获取“第一个组件”的viewModel，然后
//同步两个组件的self.prop
if（ko.components.isRegistered（“第一个组件”））{
//...???
}
}
}
});

在标记中使用组件：

<first-component params="initialText: 'Some text...'"></first-component>

<second-component params="initialText: 'Another text...'"></second-component>

---

为了促进组件和外部视图模型之间的交互，我发现最好的方法是将可观察对象作为参数传递，以管理数据的同步。我已经使用上面的代码设置了一个

第一个更改是创建父视图模型，以包含组件之间的共享状态

var parentViewModel {
  sharedText: ko.observable('shared text')
}

然后使用共享文本作为组件的参数。对于第一个组件，

initialText

设置为

sharedText

，而第二个组件，

sharedText

作为第二个参数传入。这是因为共享文本仅在单击“单击我”按钮时更新。如果将这两个属性的

sharedText

observable设置为

initialText

，则更新将自动进行。有时这是需要的，有时不是

<first-component params="initialText: sharedText"></first-component>
<second-component params="initialText: 'Initial value', sharedText: sharedText"></second-component>

在第二个组件中，使用初始文本创建一个新的可观察对象，

foo

单击处理程序使用

self.props

中的值更新

params.sharedText

引用

ko.components.register('second-component', {
    template: '<div><input type="text" data-bind="value: prop">' 
      + '<button data-bind="click: foo">Click Me</button></div>',
    viewModel: function(params){
        var self = this;
        self.prop = ko.observable(params.initialText);
        self.foo = function(){
            params.sharedText(self.prop());
        }
    }
});

---

您应该将这两个组件的视图模型放入父视图模型中。然后您可以使用

$root.firstComponentViewModel

和

$root.secondComponentViewModel

访问这两个组件。@Andreytukin感谢您的关注，但如果您问我这件事，您真的是个陌生人。我需要以编程方式获取组件的viewModel并更新此viewModel的属性。@trgiangvp3上面，我编写了演示代码，其中显示了我的实际问题。实际上，我使用的是大程序，因此我无法更改父视图模型，这是一项非常困难的任务。@Бааааааааааааааа；问题似乎很清楚。关于问题本身：我对knockout.js一无所知，但如果两个组件之间存在某种共享状态，为什么不将其提取到两个viewModels之外的某个“类似模型”的对象中，然后通过第三个对象进行通信？@AndreyTyukin是的，我也这么认为：）但我现在不知道如何在knockout.js中做到这一点。我在官方文档或代码示例中找不到一些信息。显然，我会在github.com上的knockout.js源代码中搜索解决方案谢谢你的回答，这是我最好的解决方案！

ko.components.register('second-component', {
    template: '<div><input type="text" data-bind="value: prop">' 
      + '<button data-bind="click: foo">Click Me</button></div>',
    viewModel: function(params){
        var self = this;
        self.prop = ko.observable(params.initialText);
        self.foo = function(){
            params.sharedText(self.prop());
        }
    }
});

ko.components.register('third-component', {
    template: '<div>Counter:&nbsp;<span data-bind="text: count"></span></div>',
  viewModel: function (params) {
     var self = this;
     self.count = ko.observable(0);
     self.sub = params.sharedText.subscribe(function () {
        self.count(self.count() + 1);
     });
     self.dispose = function () {
            self.sub.dispose();
     }
  }
});