js -文本输入上的每一行的每一个表，应该只编辑该行上的字段

Knockout.js - text input on each row of foreach table, should only edit field on that row

本文关键字：字段 编辑 每一个 一行 文本 js 输入      更新时间：2023-09-26

我在这里创建了以下代码:

我已经使用knockout foreach创建了一个表。每一行都可以通过该行上的内联按钮删除。可以动态添加行，并且可以通过选择行然后使用文本框实时编辑标签。

我想做的是将一个文本框移动到多个文本框中，每一行一个单独编辑该行。谢谢你的帮助。

Viewmodel: 

function Model() {
    var self = this;
    this.tasks = ko.observableArray();
    this.container = ko.observableArray();
    this.tid = ko.observable(0);
    this.addTask = function(id, content, content2) {
        var obj = {
            id: ko.observable(id),
            content: ko.observable(content),
            content2: ko.observable(content2),
            selected: ko.observable(false)
        };   
        self.tid(id);
        self.tasks.push(obj);        
    };
    this.addNewTask = function() {
      var obj = {
        id: self.tid() + 1,
        content: "New Task",
        content2: "New Service",
        selected: ko.observable(false)
      }
      self.tid(self.tid() + 1);
      self.tasks.push(obj);
    }
    this.selectedIndex = ko.observable(0);
    this.selectTask = function(task) {
        self.selectedIndex(self.tasks.indexOf(task));
    };
    self.removeTask = function(task) {
      self.tasks.remove(task)
    };
};
var myModel = new Model();
myModel.addTask(1, "Task 1", "Service 1");
myModel.addTask(2, "Task 2", "Service 2");
myModel.addTask(3, "Task 3", "Service 3");
ko.applyBindings(myModel);

视图:

<div data-bind="foreach: tasks">
<table cellpadding="0" cellspacing="0">
<tr>
  <td>
  <label class="wrapper" data-bind="text: content, click: $root.selectTask, css: {'selected': $root.selectedIndex() === $index()}" />
  </td>
  <td>-</td>
  <td>
    <span class="wrapper" data-bind="text: content2, click: $root.selectTask, css: {'selected': $root.selectedIndex() === $index()}"></span>
  </td>
  <td> <input type="button" value="remove" data-bind="click: $parent.removeTask"></td>
</tr>
</table>    
</div>
<br />
Add New Task: &nbsp;<input type="button" value="add" data-bind="click: addNewTask"><br /><br />
<label>Edit Task:</label> <input type="text" data-bind="value: tasks()[selectedIndex()].content2, valueUpdate: 'afterkeydown'">

您可以将<input>移动到行中自己的<td>。

当前将输入绑定到所选项;在它的新位置，你可以把它绑定到bindingContext:

<td>
  <label>Edit Task:</label> <input type="text" data-bind="value: content2, valueUpdate: 'afterkeydown'">
</td>

要在新项目上工作，你必须确保它们也获得可观察属性。(我也改变了这在更新小提琴)

https://jsfiddle.net/90w1pagr/

首先，如果你想编辑你新创建的行，你必须做ko。可观察对象的值:

this.addNewTask = function() {
    var obj = {
    id: ko.observable(self.tid() + 1),
    content: ko.observable("New Task"),
    content2: ko.observable("New Service"),
    selected: ko.observable(false)
  } ....

然后，每行有一个文本框，替换为:

<span class="wrapper" data-bind="text: content2, click: $root.selectTask, css: {'selected': $root.selectedIndex() === $index()}"></span>

with: 

<input type="text" data-bind="value: content2, valueUpdate: 'afterkeydown'">

进一步将data-bind="foreach: tasks"移动到。您将为每个任务重复行而不是表。

相关文章：