问题描述
我最近开始学习JS和KO，我已经完成KO实时教程并阅读了文档，但是，仍然有些事情我自己不明白。只是想知道您是否可以帮助这个简单的应用程序，因此我可以进一步学习。
我有一个缩小为字符串的json对象，它只是一个包含食物项目的数组，每个食物项目也具有sections数组。因此，我的学习目标将是显示每个食品的名称，为食品份量选择下拉列表，为数量字段选择输入字段（我想自己编辑此值，因此需要观察）。我不知道的是，当我不断更改投放尺寸下拉列表选择时，如何将数量值提取到输入字段中。
我已将当前代码上传到jsfiddle中，因此可以轻松查看，我相信我非常接近使这个小应用程序正常工作。
https://jsfiddle.net/2zkeycjb/
HTML和JS代码：
<!DOCTYPE html>
<html>
<head>
<title>KO</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js'></script>
</head>
<body>
<script type="text/javascript">
var foodsJson = JSON.parse('[{"id":"ea17ca42-38d4-7e02-22ea-43b20fc7f3fc","name":"Macaroni","foodPortions":[{"id":"69869c2b-efbc-418f-98be-bb5651e595c5","quantity":1,"servingSize":"piece","calories":3},{"id":"0d7c01c9-4edd-4da5-91f6-fe18a14ff745","quantity":100,"servingSize":"g.","calories":157}]},{"id":"c6768773-4e0c-7255-4f0b-0205c7f78f42","name":"Salmon Maki","foodPortions":[{"id":"c9c6b7a9-83d0-4dc4-aebb-06948714da65","servingSize":"cup","calories":305},{"id":"cf84c55f-8b91-4419-8868-275d8634f961","calories":184},{"id":"c8c4e813-6a50-4e8e-b5a2-4ae44e846b26","servingSize":"oz (28.34 g.)","calories":52},{"id":"7fac51dd-2592-407e-a4da-6829a6536e6c","calories":28}]}]');
function FoodPortion(foodPortion) {
var self = this;
self.portion = ko.observable(foodPortion);
self.servingSize = ko.computed(function() {
return self.portion().id;
});
self.servingSize = ko.computed(function() {
return self.portion().servingSize;
});
self.quantity = ko.computed(function() {
return self.portion().quantity;
});
self.calories = ko.computed(function() {
return self.portion().calories;
});
}
function Food(foodItem) {
var self = this;
self.food = ko.observable(foodItem);
self.name = self.food().name;
self.portions = ko.utils.arrayFilter(self.food().foodPortions,function(foodPortion) {
return new FoodPortion(foodPortion);
});
self.selectedPortion = ko.observable();
}
function Foodviewmodel() {
var self = this;
self.foods = $.map(foodsJson,function(foodItem) {
return new Food(foodItem)
});
}
</script>
<div data-bind="foreach: foods">
<span data-bind="text: name"></span>
<select data-bind="
options: portions,value: selectedPortion,optionsText: function(portion) { return portion.servingSize; }">
</select>
<input type="text" data-bind="value: selectedPortion.quantity">
<br />
</div>
<script type="text/javascript">
ko.applyBindings(new Foodviewmodel());
</script>
</body>
</html>
此外，这是应用程序中使用的示例JSON文件
[{
"id": "ea17ca42-38d4-7e02-22ea-43b20fc7f3fc","name": "Macaroni","foodPortions": [{
"id": "69869c2b-efbc-418f-98be-bb5651e595c5","quantity": 1.0,"servingSize": "piece","calories": 3.0
},{
"id": "0d7c01c9-4edd-4da5-91f6-fe18a14ff745","quantity": 100.0,"servingSize": "g.","calories": 157.0
}
]
},{
"id": "c6768773-4e0c-7255-4f0b-0205c7f78f42","name": "Salmon Maki","foodPortions": [{
"id": "c9c6b7a9-83d0-4dc4-aebb-06948714da65","servingSize": "cup","calories": 305.0
},{
"id": "cf84c55f-8b91-4419-8868-275d8634f961","calories": 184.0
},{
"id": "c8c4e813-6a50-4e8e-b5a2-4ae44e846b26","servingSize": "oz (28.34 g.)","calories": 52.0
},{
"id": "7fac51dd-2592-407e-a4da-6829a6536e6c","calories": 28.0
}
]
}
]
任何帮助深表感谢！ 谢谢
解决方法
使用with绑定将上下文更改为所选项目。
<!-- ko with: selectedPortion -->
<input type="text" data-bind="value: quantity">
<!-- /ko -->
您还应该映射要更改为可观察字段的所有属性。
function FoodPortion(foodPortion) {
this.id = ko.observable(foodPortion.id);
this.servingSize = ko.observable(foodPortion.servingSize);
this.quantity = ko.observable(foodPortion.quantity);
this.calories = ko.observable(foodPortion.calories);
}