1
최근 녹아웃 학습을 시작했습니다. .txt 파일에서 JSON을 가져온 다음 knockout을 사용하여 테이블을 만들어야하는 과제가 주어졌습니다. 테이블도 편집 가능해야합니다 (행 추가, 제거 및 편집). 나는 편집 부분 이외에 모든 것을 할 수 있었다. 너희들이 나를 도울 수 있으면 감사 할께.녹아웃 편집 테이블 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/jquery-ui.min.css">
<script type="text/javascript" src="scripts/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="scripts/libs/knockout-3.4.0.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery.shorten.1.0.js"></script>
</head>
<body>
<div id="wrapper">
<table>
<thead>
<tr><th>Num</th><th>isActive</th><th>Balance</th><th>Age</th><th>Eye Color</th><th>First name</th><th>Last name</th><th>Tags</th><th>Total</th><th>Company</th><th>email</th><th>phone</th><th>address</th><th>about</th><th>registered</th><th>greeting</th><th>favoriteFruit</th></tr>
</thead>
<tbody data-bind="foreach: People">
<tr>
<td> <span data-bind="text: $index"> </span></td>
<td><input class="checkbox" type="checkbox" data-bind="checked: isActive" /></td>
<td ><span class="balanceRes" data-bind="text: $data.balance"></span></td>
<td ><input class="balanceEdit" type="text" data-bind="value: $data.balance" /></td>
<td data-bind="text: age"></td>
<td data-bind="text: eyeColor"></td>
<td data-bind="text: name.first"></td>
<td data-bind="text: name.last"></td>
<td><select data-bind="options: tags"></select></td>
<td data-bind="text: range"></td>
<td data-bind="text: company"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
<td data-bind="text: address"></td>
<td class="about" data-bind="text: about"></td>
<td class="date" name=data data-bind="text: registered"></td>
<td data-bind="text: greeting"></td>
<td data-bind="text: favoriteFruit"></td>
<td><input type="button" value="remove" data-bind="click:$parent.removePerson" /></td>
<td><input type="button" value="edit" data-bind="click:$parent.editPerson" /></td>
</tr>
</tbody>
</table>
Balance <input id="balance-add" type="text">
Age <input id="age-add" type="text">
Eye Color <input id="eyeColor-add" type="text">
First Name <input id="firstName-add" type="text">
Last Name <input id="lastName-add" type="text">
Tags <input id="tags-add" type="text">
Total <input id="total-add" type="text">
Company <input id="company-add" type="text">
Email <input id="email-add" type="text">
Phone <input id="phone-add" type="text">
Address <input id="address-add" type="text">
About <input id="about-add" type="text">
Registered <input type="text" name="date" id="date-add"/>
Greeting <input id="greeting-add" type="text">
Favorite Fruit <input id="fruit-add" type="text">
</div>
<br/>
<button data-bind="click: addPerson">Add</button>
<script src="scripts/app.js"></script>
</body>
</html>
$(document).ready(function() {
let dataText;
$.ajax({
url : "scripts/data.txt",
dataType: "text",
success : function (data) {
dataText=data;
var objJs=JSON.parse(dataText);
var count = Object.keys(objJs).length;
var sum=0;
for(let i=0;i<count;i++){
let ranges=objJs[i].range.length;
for(let j=0;j<ranges;j++){
sum+=objJs[i].range[j];
}
objJs[i].range=sum;
sum=0;
}
ko.applyBindings(new AppViewModel(objJs));
createTable();
}
})});
function createTable() {
$('#date-add').datepicker({ minDate: 0});
$('.about').shorten({
"showChars" : 50
});}
function AppViewModel(data) {
let self=this;
self.People=ko.observableArray(data);
self.addPerson=function() {
self.People.push({isActive:false, balance:$('#balance-add').val(),age:$('#age-add').val(),eyeColor: $('#eyeColor-add').val(),
name:{first:$('#firstName-add').val(),last:$('#lastName-add').val()}, tags:$('#tags-add').val().split(","),
range:$('#total-add').val(),company:$('#company-add').val(),email:$('#email-add').val(),email:$('#email-add').val(),
phone:$('#phone-add').val(),address:$('#address-add').val(),address:$('#address-add').val(),about:$('#about-add').val(),
registered:$('#date-add').val(),greeting:$('#greeting-add').val(),favoriteFruit:$('#fruit-add').val()})}
self.removePerson=function (people) {
self.People.remove(people);
}
self.editPerson=function (people) {
}}
좋았지 문제에 내가 할 방법을 모르는 것입니다 옆에 나는 현재 편집 버튼을 누를 때, 밸런스 값으로 범위가 입력에서 업데이트되는 있도록 만들려고 노력하고 있어요 self.editPerson = function (people)이 제대로 작동합니다. 나는 이것을 시도했다. 사람들. 균형 (색인. 균형); - (Uncaught TypeError : 정의되지 않은 'balance'속성을 읽을 수 없습니다.) 또는 self.People() [people.index] .balance = people.balance; - (결과가 없거나 오류가 있습니다) 내가 시도한 다른 모든 일은 성공하지 못했습니다. 디버깅하는 동안 self.People() [people.index] .balance 이미 편집 단추 클릭 이벤트 후 입력 된 필드의 값으로 변경된 있지만 테이블에 표시되지 않는 것을 보았다. 아이디어를 테이블에 어떻게 표시 할 수 있습니까?
[{
"_id": "5608ef7db3723785000cc555",
"index": 0,
"guid": "fc4c666f-3da1-4627-899b-a79fea0901cd",
"isActive": false,
"balance": "$3,288.11",
"age": 22,
"eyeColor": "brown",
"name": {
"first": "Brandie",
"last": "Mathis"
},
"company": "XEREX",
"email": "[email protected]",
"phone": "+1 (975) 575-2608",
"address": "728 Colonial Road, Neibert, South Dakota, 7145",
"about": "Ad pariatur aute adipisicing magna enim nulla laboris. Sunt officia consequat elit fugiat ipsum sint aliquip sit irure sunt quis laboris. Labore elit consectetur excepteur ex in velit quis mollit excepteur aute nostrud cupidatat sint. Veniam labore incididunt exercitation mollit veniam et consequat mollit dolore do. Laboris ad proident et culpa irure et ullamco qui fugiat labore ex voluptate culpa. Laboris nisi sunt magna et.",
"registered": "Tuesday, August 5, 2014 3:53 PM",
"tags": [
"deserunt",
"do",
"sint",
"proident",
"nulla",
"Lorem",
"esse",
"custom_tag"
],
"range": [
1,
3,
3,
4,
5,
7,
8
],
"greeting": "Hello, Brandie! You have 7 unread messages.",
"favoriteFruit": "strawberry"
},
{
"_id": "5608ef7d5503c0da99a874ae",
"index": 1,
"guid": "5ca9f2f0-a2bf-4ba5-be84-40df2020c7e6",
"isActive": false,
"balance": "$2,205.31",
"age": 20,
"eyeColor": "brown",
"name": {
"first": "Celia",
"last": "Hopper"
},
"company": "QUANTALIA",
"email": "[email protected]",
"phone": "+1 (899) 588-2155",
"address": "488 Monaco Place, Abrams, Oklahoma, 4175",
"about": "Magna ut cillum nisi ipsum tempor aute. Mollit exercitation voluptate cillum anim sit laborum qui ullamco occaecat culpa in. Consequat eu qui sint exercitation magna ea proident excepteur ullamco velit nisi. Ullamco ullamco anim cillum Lorem ea mollit do minim. Ad nisi dolor consectetur anim nisi ex ea elit ullamco nostrud nisi id.",
"registered": "Saturday, January 3, 2015 10:56 PM",
"tags": [
"deserunt",
"do",
"sint",
"proident",
"nulla",
"Lorem",
"esse",
"custom_tag"
],
"range": [
0,
1,
3,
4,
6,
7,
9
],
"greeting": "Hello, Celia! You have 6 unread messages.",
"favoriteFruit": "strawberry"
}]