如何在 Knockout for table 中进行可见数据绑定？

Question

我有一个按 foreach 循环列出的表格。我想要多一列包含Edit、Validate 和Cancel。

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

这是我的提琴手：http://jsfiddle.net/v9BNr/14/

<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 切换是您的最佳选择，但是有很多方法可以做到这一点。下面的代码（和小提琴中的代码）是最简单的方法，只需将其固定到可观察对象上。链接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