Question

我创建了以下代码here的小提琴。

我使用淘汰赛foreach创建了一张桌子。可以通过该行上的内联按钮删除每一行。可以动态添加行，并且可以通过选择行然后使用文本框实时编辑标签。

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

视图模型：

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'">

Answer 1

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

您当前正在将输入绑定到所选项目;在新位置，您可以将其绑定到bindingContext：

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

要使它处理新项目，您必须确保它们也能获得可观察的属性。（我也在更新的小提琴中改变了这一点）

https://jsfiddle.net/90w1pagr/

Answer 2

首先，如果你想编辑新创建的行，你必须使ko.observable成为它的值：

<div class="container">
  <div class="progress">&nbsp;
  </div>
  <div class="content">
    <h2>
   Some Content Text.... Some Content Text....Some Content Text....
   Some Content Text....Some Content Text....
 </h2>
  </div>
  <div class="status">
    <div class="priority">
    </div>
    <div class="prog">
    </div>
  </div>
</div>

然后，要在每一行上都有一个文本框，请替换：

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)
  } ....

with：

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

进一步移动你的data-bind =＆＃34; foreach：tasks＆＃34;到了。您将为每项任务重复而不是表格。

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

2 个答案: