최근에 JS와 KO를 배우기 시작했고, KO 라이브 튜토리얼을 마치고 문서를 읽었지만, 여전히 스스로 알아낼 수없는 것이 있습니다. 이 간단한 응용 프로그램에 도움을 줄 수 있는지 궁금해서 더 배울 수 있습니다.
나는 음식 항목을 포함하는 배열이며 모든 음식 항목에도 부분 배열이있는 문자열로 축소 된 json 객체가 있습니다. 따라서 저의 학습 목표는 각 음식 항목 이름을 표시하고, 음식 제공량에 대한 드롭 다운 목록을 선택하고 수량 필드에 대한 입력 필드를 선택하는 것입니다 (이 값을 직접 편집하고 있으므로 관찰 가능해야 함). 내가 알 수없는 것은 서빙 크기 드롭 다운 목록 선택을 계속 변경할 때 수량 값을 입력 필드로 가져 오는 방법입니다.
현재 코드를 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","quantity":1,"servingSize":"cup","calories":305},{"id":"cf84c55f-8b91-4419-8868-275d8634f961","quantity":100,"servingSize":"g.","calories":184},{"id":"c8c4e813-6a50-4e8e-b5a2-4ae44e846b26","quantity":1,"servingSize":"oz (28.34 g.)","calories":52},{"id":"7fac51dd-2592-407e-a4da-6829a6536e6c","quantity":1,"servingSize":"piece","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",
"quantity": 1.0,
"servingSize": "cup",
"calories": 305.0
},
{
"id": "cf84c55f-8b91-4419-8868-275d8634f961",
"quantity": 100.0,
"servingSize": "g.",
"calories": 184.0
},
{
"id": "c8c4e813-6a50-4e8e-b5a2-4ae44e846b26",
"quantity": 1.0,
"servingSize": "oz (28.34 g.)",
"calories": 52.0
},
{
"id": "7fac51dd-2592-407e-a4da-6829a6536e6c",
"quantity": 1.0,
"servingSize": "piece",
"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);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다