Question

我最近开始学习淘汰赛。我得到了一项任务，要求我从.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 =功能（人）功能正常。我试过这个.People.balance（index.balance）; - （未捕获的TypeError：无法读取未定义的属性'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"
  }]

Answer 1

当前数据上下文传递给click处理程序。在foreach中，数据上下文是当前行，这正是您想要的。我做了一个非常简化的例子来演示。

另外：请勿从addPerson的表单中提取值。这些输入应该与视图模型中的项绑定值。您的视图模型和表单之间的任何通信都必须由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>

淘汰赛编辑表元素

1 个答案: