将现有模型传递给淘汰组件绑定
Passing existing model to knockout component binding?
我刚刚开始探索淘汰组件,因为我们的代码库是在组件引入之前的方式。
有几件事我一读就不明白。
- 如何在
component
绑定中使用现有的视图模型? - 调用
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);
您可以通过参数(params)将现有模型传递给组件:
function Customer(params) {
this.name = ko.observable(params.name);
this.orders = ko.observableArray(params.orders);
}
Customer.prototype.addOrder = function(order) {
this.orders.push(order);
}
function Order(params) {
this.date = ko.observable(params.date);
}
ko.components.register("customer", {
viewModel: Customer,
template: "<strong data-bind='text: name'></strong><ul data-bind='foreach: orders'><li><order params='date: date'></order></li></ul>"
});
ko.components.register("order", {
viewModel: Order,
template: "<span data-bind='text: date'></span>"
});
ko.applyBindings({ modelName: "Some Name", orders: [ { date: "01/01/01" } ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<customer params="name: modelName, orders: orders"></customer>
更新:viewModel-less组件spike(我喜欢@Zoltán Tamási这个想法):
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();
}
ko.components.register("customer", {
viewModel: function(params) { return params.model; },
template: "<strong data-bind='text: name'></strong><ul data-bind='foreach: orders'><li><order params='model: $data'></order></li></ul>"
});
ko.components.register("order", {
viewModel: function(params) { return params.model; },
template: "<span data-bind='text: date'></span>"
});
var customer = new Customer();
customer.name = "Test";
var order = new Order();
order.date = new Date(Date.now());
customer.addOrder(order);
ko.applyBindings({ customer: customer });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<customer params="model: customer"></customer>
您正在寻找的解决方案是将您的组件注册到这个视图模型工厂:
ko.components.register("your-element", {
template: {...},
{ createViewModel: (params, componentInfo) => ko.dataFor(componentInfo.element) };
};
这会给你"pass through"绑定,例如:
<div data-bind="with: SomeModel">
<your-element></your-element>
</div>
为模板加载的HTML中的视图模型将是SomeModel.
最后一个问题:您仍然applyBindings
到应用程序的视图模型。使用组件不会改变这一点。
组件可以接收参数。这就是将任何东西传递给视图模型构造函数的方式。
您是否尝试过使用"共享对象实例",例如:http://knockoutjs.com/documentation/component-registration.html#specifying-a-viewmodel?
相关文章:
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- React组件等待所需道具进行渲染
- 如何创建带有插槽的vue js组件预加载程序
- 使用AMD时未定义淘汰组件视图模型
- 从淘汰js组件中获取数据
- 带有淘汰SPA的HTML尝试使用组件,绑定不起作用
- 在viewModel之前注册淘汰组件的问题
- 淘汰foreach和模板中的组件
- 如何在淘汰amd组件之间应用过渡效果
- 淘汰3.2 amd组件,不更新可观测值
- 淘汰:可扩展的主题组件
- 淘汰嵌套组件:$(document).ready() ..在加载嵌套组件之前运行
- 淘汰带有命名模板的3.2组件
- 将现有模型传递给淘汰组件绑定
- 将参数传递给淘汰组件
- 淘汰组件更新未被父视图模型订阅的可观察对象
- 如何引用被淘汰组件改变的元素
- 如果元素在模板返回前被移除,则淘汰组件失败