我真的很喜欢cartEditor 中的实时示例。这就是我需要的。好吧，如果我想添加另一个下拉列表，几乎该怎么办。例如，如果我想在现有示例中添加另一个字段 country。场景如下：我选择国家、车辆类别并据此选择车辆本身。如何将两个下拉菜单绑定到第三个？
数据库中有关此类的表：
台车
id name countryId categoryId
表格类别
身份证名称
表格国家
身份证名称
实时示例的文件位于knockoutjs.com
【问题讨论】：
标签： jquery knockout.js data-binding yii2
您将继续使用相同的原则：
ko.pureComputed 属性，根据用户输入选择数据子集。
例如，假设您的产品同时具有 category 和 country：
var products = [
{
name: "Cheese",
country: "The Netherlands",
category: "Dairy"
}
]
现在，如果您有两个绑定到 UI 的 observable：
this.selectedCountry = ko.observable();
this.selectedCategory = ko.observable();
您可以创建一个ko.pureComputed，选择符合要求的产品：
this.selectedProducts = ko.pureComputed(function() {
return products.filter(function(product) {
return product.category === this.selectedCategory() &&
product.country === this.selectedCountry();
});
}, this);
例子：
var products = [
{
name: "Gouda Cheese",
country: "The Netherlands",
category: "Dairy"
},
{
name: "Camambert",
country: "France",
category: "Dairy"
},
{
name: "Red Wine",
country: "France",
category: "Alcoholic beverages"
}
];
var ViewModel = function() {
// These will be bound to your dropdowns' selections
this.selectedCountry = ko.observable();
this.selectedCategory = ko.observable();
// This computed calculates which products from your data
// meet the requirements whenever one of the selections changes
this.selectedProducts = ko.pureComputed(function() {
return products.filter(function(product) {
return product.category === this.selectedCategory() &&
product.country === this.selectedCountry();
}.bind(this));
}, this);
// Here, we create a list of countries that appear in your data,
// this list is used to fill the dropdown's options
this.countries = getKeyUniques(products, "country");
// Do the same for categories
this.categories = getKeyUniques(products, "category");
};
ko.applyBindings(new ViewModel());
// Utils
function getKeyUniques(arr, key) {
return Object.keys(arr.reduce(function(map, item) {
map[item[key]] = true;
return map
}, {}));
};<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: countries, value: selectedCountry"></select>
<select data-bind="options: categories, value: selectedCategory"></select>
<ul data-bind="foreach: selectedProducts">
<li data-bind="text: name"></li>
</ul>【讨论】：
我的解决方案如下。我想根据 ID 进行过滤。计划从服务器获取国家和类别列表，然后从服务器接收经过过滤的产品列表。非常感谢用户。在您的帮助和http://knockoutjs.com/examples/cartEditor.html 网站上的示例的帮助下，我解决了我的问题。 在这里发布我的解决方案：
var countries = [
{
"id": 1,
"name": "Russia"
},
{
"id": 2,
"name": "USA"
},
{
"id": 3,
"name": "Great Britain"
}
];
var categories = [
{
"id": 1,
"name": "Classic Cars"
},
{
"id": 2,
"name": "Motorcycles"
},
{
"id": 3,
"name": "Planes"
}
];
var products = [
{
"name": "P-51-D Mustang",
"countryId": 2,
"categoryId": 3,
"price": 12.42
},
{
"name": "1997 BMW R 1100 S",
"countryId": 2,
"categoryId": 2,
"price": 60.87
},
{
"name": "2002 Chevy Corvette",
"countryId": 2,
"categoryId": 1,
"price": 100.87
},
{
"name": "1998 Chrysler Plymouth Prowler",
"countryId": 1,
"categoryId": 1,
"price": 150.87
}
];
var CartLine = function () {
var self = this;
self.countries = ko.observableArray(countries);
self.categories = ko.observableArray(categories);
self.quantity = ko.observable(1);
self.selectedCountry = ko.observable();
self.selectedCategory = ko.observable();
self.selectedProduct = ko.observable();
self.subtotal = ko.pureComputed(function () {
return self.selectedProduct() ? (self.selectedProduct().price * self.quantity()) : "yet";
});
self.products = ko.pureComputed(function () {
return $.grep(products, function (item) {
return (self.selectedCountry() && self.selectedCategory() && item.countryId === self.selectedCountry().id && item.categoryId === self.selectedCategory().id);
});
});
};
var Cart = function () {
var self = this;
self.lines = ko.observableArray([new CartLine()]);
self.lines2 = ko.observableArray([new CartLine()]);
self.grandTotal = ko.pureComputed(function () {
var total = 0;
$.each(self.lines(), function () {
total += this.subtotal();
});
return total;
});
// Operations
self.addLine = function () {
self.lines.push(new CartLine());
};
self.removeLine = function (line) {
self.lines.remove(line);
};
};
ko.applyBindings(new Cart());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stl.css" />
</head>
<body>
<div class='liveExample'>
<table width='50%'>
<thead>
<tr>
<th width='25%'>Country</th>
<th width='25%'>Category</th>
<th class='price' width='15%'>Product</th>
<th class='price' width='15%'>Price</th>
<th class='quantity' width='10%'>Quantity</th>
<th class='price' width='15%'>Subtotal</th>
<th width='10%'></th>
</tr>
</thead>
<tbody data-bind='foreach: lines'>
<tr>
<td>
<select data-bind='options: countries, optionsText: "name", optionsCaption: "Select...", value: selectedCountry'> </select>
</td>
<td>
<select data-bind='options: categories, optionsText: "name", optionsCaption: "Select...", value: selectedCategory'> </select>
</td>
<td>
<select data-bind='visible: (selectedCountry() && selectedCategory()), options: products, optionsText: "name", optionsCaption: "Select...", value: selectedProduct'> </select>
</td>
<td>
<span data-bind='text: selectedProduct() ? selectedProduct().price : 0'> </span>
</td>
<td class='quantity'>
<input data-bind='value: quantity, valueUpdate: "afterkeydown"' />
</td>
<td class='price'>
<span data-bind='text: subtotal()'> </span>
</td>
<td>
<a href='#' data-bind='click: $root.removeLine'>Remove</a>
</td>
</tr>
</tbody>
</table>
<p class='grandTotal'>
Total value: <span data-bind='text: grandTotal()'> </span>
</p>
<button data-bind='click: addLine'>Add product</button>
</div>
<script src="knockout-3.4.1.js" type="text/javascript"></script>
<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>【讨论】：
我根据下面的方法做了你要求的 -
countryId 和categoryId 跟踪在类别和country 和filtering 的下拉列表中选择的车辆数组
为此，我将subscribed 设置为country 和category 的选定值，因此当它们中的任何一个发生更改时，我调用过滤器来更新选定的车辆，以便在第三个下拉列表中进行更新。
它还在视图模型定义的末尾包含了一些测试结果。
附： - 数据组合不好，请原谅我，但我想我的努力足以让您了解它的要点；-)
这里是fiddle
【讨论】：