Javascript 将现有模型传递给淘汰组件绑定？

我刚刚开始探索敲除组件，因为我们的代码库在组件引入之前就已经存在了

有几件事我一开始读不懂

如何在

组件

绑定中使用现有的viewmodel

调用

applyBindings

时我应该绑定到什么

这里有一个简单的例子来说明我的意思

function Customer() {
  this.name = ko.observable();
  ...
  this.orders = ko.observableArray([]);
}
Customer.prototype.addOrder = function(order) {
  this.orders.push(order);
}
...
function Order() {
  this.date = ko.observable();
  ...
}
...
// HERE I want the component binding in the foreach to use the $data
ko.components.register("Customer", {
  viewModel: Customer,
  template: "<strong data-bind='text: name'></strong><ul data-bind='foreach: orders'><li data-bind='component: "Order"'></li></ul>"
});

ko.components.register("Order", {
  viewModel: Order,
  template: "<span data-bind='text: date'></span>"
});
...

<!-- HERE I would like the component binding to use $data too -->
<div data-bind="component: 'Customer'"></div> 

...

var customer  = new Customer(); 
customer.name = "Test";

var order = new Order();
order.data = new Date();
customer.addOrder(order);

ko.applyBindings(customer);

功能客户（）{
this.name=ko.observable（）；
...
this.orders=ko.observearray（[]）；
}
Customer.prototype.addOrder=函数（订单）{
这个.命令.推（命令）；
}
...
函数顺序（）{
this.date=ko.observable（）；
...
}
...
//这里我希望foreach中的组件绑定使用$data
ko.组件。注册（“客户”{
视图模型：客户，
模板：“
”
});
ko.components.register（“订单”{
视图模型：订单，
模板：“”
});
...
...
var customer=新客户（）；
customer.name=“测试”；
var order=新订单（）；
order.data=新日期（）；
customer.addOrder（订单）；
ko.应用绑定（客户）；

您可以通过参数（参数）将现有模型传递给组件：

功能客户（参数）{
this.name=ko.observable（参数名称）；
this.orders=ko.observearray（params.orders）；
}
Customer.prototype.addOrder=函数（订单）{
这个.命令.推（命令）；
}
函数顺序（参数）{
this.date=ko.可观察（参数日期）；
}
ko.组件。注册（“客户”{
视图模型：客户，
模板：“
”
});
ko.components.register（“订单”{
视图模型：订单，
模板：“”
});
ko.applyBindings（{modelName:“Some Name”，orders:[{date:“01/01/01”}]}）
首先是最后一个问题：您仍然
applyBindings
应用程序的viewmodel。使用组件不会改变这一点

组成部分。这就是您将任何内容传递给其viewmodel构造函数的方式。
您正在寻找的解决方案是向此视图模型工厂注册组件：

ko.components.register("your-element", { 
    template: {...}, 
   { createViewModel: (params, componentInfo) => ko.dataFor(componentInfo.element) };
};

这将为您提供“直通”绑定，例如：

<div data-bind="with: SomeModel">
    <your-element></your-element>
</div>



为您的模板加载的HTML中的视图模型将是SomeModel。
您是否尝试过使用“共享对象实例”，如此处：？
我知道有关参数的信息。但我不明白为什么每次都要创建一个新的viewmodel实例，而不是使用
orders
中的实例。这似乎没有道理。
客户
实例中已经有准备就绪的
订单
实例。每个逻辑都告诉我应该在绑定时使用它们，否则它也会失去同步。此外，在我们当前的场景中，我们在应用绑定之前手动实例化整个viewmodel结构，因此我们具有完全的灵活性，例如加载初始数据等。就我目前所见，使用
component
s与此方法背道而驰，因为每个组件都坚持创建自己的实例或viewmodel。另外，我知道没有viewmodels的
component
s，我知道我可以使用它们并使用
params
传递现有的viewmodel。是的，我知道，尽管我喜欢自定义元素、AMD风格的模板加载等想法，所以我想利用这些功能，但保留现有的viewmodel类结构。我只需要一种绕过组件的viewModel创建并传递现有组件的方法。也许我会选择viewModel-less组件。我喜欢你关于viewModel-less组件的想法，并用尖峰更新了答案。