gpt4 book ai didi

javascript - 将现有模型传递给 knockout 组件绑定(bind)?

转载 作者:行者123 更新时间:2023-11-29 10:08:01 25 4
gpt4 key购买 nike

我刚刚开始探索 knockout 组件,因为我们的代码库远早于引入组件。

有几件事我一开始看不懂。

  1. 如何在 component 绑定(bind)中使用现有的 View 模型?
  2. 调用 applyBindings 时我应该绑定(bind)什么?

这是我的意思的一个简单示例。

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 组件激增(我喜欢@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>

关于javascript - 将现有模型传递给 knockout 组件绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39488057/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com