我最近开始学习 knockout 。我收到的作业要求我从 .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 =功能(人)正常运作。 我尝试使用 this.People.balance(index.balance); -(未捕获类型错误:无法读取未定义的属性“余额”)或 self.People()[people.index].balance=people.balance; -(没有结果或错误) 我尝试过的所有其他事情都没有成功。 在调试过程中，我看到 self.People()[people.index].balance 已经随着编辑按钮单击事件后输入字段中的值而更改，但它没有显示在表中。 有什么想法如何将其显示在表格中吗？
这是txt文件中的一些内容:
[{
"_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": "brandie.mathis@xerex.com",
"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": "celia.hopper@quantalia.ca",
"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"
}]
最佳答案
当前数据上下文被传递到click 处理程序。在您的 foreach 中，数据上下文是当前行，这正是您想要的。我做了一个大大简化的示例来演示。
另外:不要从 addPerson 的表单中提取值。这些输入应该与 View 模型中的项目进行值绑定(bind)。 View 模型和表单之间的任何通信都必须通过 Knockout 进行代理。
vm = {
people: [{
name: 'One',
age: 1
}, {
name: 'Two',
age: 2
}],
editor: {
name: ko.observable(),
age: ko.observable()
},
editPerson: function (data) {
vm.editor.name(data.name);
vm.editor.age(data.age);
}
};
ko.applyBindings(vm);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tbody data-bind="foreach:people">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<button data-bind="click: $parent.editPerson">Edit</button>
</td>
</tr>
</tbody>
</table>
<div data-bind="with: editor">
<div>Name:
<input data-bind="value:name" />
</div>
<div>Age:
<input data-bind="value:age" />
</div>
</div>关于javascript - knockout 编辑表元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39545877/