Question

我有一个foreach循环列表。我想再添一个包含Edit，Validate和Cancel的列。

当用户点击Edit时，应显示输入标记，并允许用户输入值并验证或取消。然后，应隐藏输入标记。

<table>
   <tbody data-bind="foreach: mapDictionaryToArray(contents())">
      <tr>
         <td> <span id="textKey" data-bind="text: $data.key"></span>
         </td>
         <td> 
            <input data-bind="value:$data.value"  />
            <label data-bind="text:$data.value" />
         </td>
         <td>
            <a href="#" 
               data-bind="">
            Edit</a> 
            <a href="#" 
               data-bind="">
            Apply</a>
            <a href="#" 
               data-bind="">
            Cancel</a>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

在Knockout中，您可以使用visible:绑定并将其设置为返回boolean的表达式，

<td> 
  <input data-bind="value:$data.value,visible:$data.isEditing" />
  <label data-bind="text:$data.value" />
</td>

您可以向视图模型添加属性，以定义表达式并使用它。我已经通过粗略的实施更新了the fiddle。

Answer 2

@ rae1注意到的问题是非常模糊的，但是，要求你的要求是编辑表格中的字段，这是通过迭代数组生成的，这个小提琴应该可以解决你的问题Editing A Row and validating it - JSFiddle

让我解释一下，

同样，@ rae1使用visible切换声明是您的最佳选择，但有很多方法可以做到。下面的代码（和小提琴）是简单的方法，简单地将它固定到一个observable。链接edit和validate只是切换可观察editMode的值，因为敲门订阅会影响用户可见的控件

块引用

查看模型

var viewModel = {
    data: []
};

function element(datum) {
    var moi = this;
    moi.editMode = ko.observable(false);
    moi.value = ko.observable(datum);
    moi.edit = function (koObj, jqObj) {
        moi.editMode(true);
    };
    moi.validate = function (koObj, jqObj) {
        moi.editMode(false);
    };
}

viewModel.data[viewModel.data.length] = new element('Hi');
viewModel.data[viewModel.data.length] = new element('I');
viewModel.data[viewModel.data.length] = new element('like');
viewModel.data[viewModel.data.length] = new element('to');
viewModel.data[viewModel.data.length] = new element('smile');

$(document).ready(function (event) {
    ko.applyBindings(viewModel);
});

查看

<tbody data-bind="foreach:data"> <tr> <td> <a href="#" data-bind="click:edit">edit</a> <a href="#" data-bind="click:validate">validate</a> </td> <td> <input type="text" data-bind="value:value, visible:editMode()" /> <span data-bind="text:value, visible:!editMode()"></span> </td> </tr> </tbody>

但是，这仅在网格或表的结构是静态的时才有用，并且只有数组项数的行数不同。如果您的网格的宽度或列数也是动态的，那么您将不得不使用knockoutjs'virtual elements

Answer 3

试试这个：

<td style="width:50px;"> <span data-bind="text: first, visible:!isEdit()"></span><input class="form-control input-sm" data-bind="textInput: first, visible: isEdit()" style="width:95%" /></td>

演示实践：JSFIDDLE

我还在这里更新了你的小提琴：updated fiddle

如何在Knockout中为表执行可见数据绑定？

3 个答案: