文章/答案/技术大牛

发布

问挖空编辑表格元素
EN

Stack Overflow用户

提问于 2016-09-17 18:43:25

回答 1查看 801关注 0票数 1

我最近开始学习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) {

}}

我目前正在尝试这样做，以便当编辑按钮被按下时，带有平衡值的跨度会从it.The旁边的输入更新。问题是我不知道如何正确地执行self.editPerson=function(people)函数。我尝试了this.People.balance(index.balance)；-(未捕获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": "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"
  }]

knockout.js

javascript

jquery

json

回答 1

Stack Overflow用户

发布于 2016-09-17 20:52:24

当前数据上下文被传递给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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39545877

复制

相似问题

问挖空编辑表格元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问挖空编辑表格元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问挖空编辑表格元素
EN