如何在Knockout中为表进行可视化数据绑定？

我有一个由foreach循环列表的表。我想再有一列包含Edit,Validate和Cancel。如何在Knockout中为表进行可视化数据绑定？

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

这里是我的Fidder酒店：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>

来源

2014-06-05 TrangZinita

淘汰赛，你可以只使用visible:结合，并将其设置为返回boolean表达，

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

您可以将属性添加到您的视图模型定义了表达式并使用。我更新了the fiddle粗略的实施。

来源

2014-06-05 13:59:46 rae1

我虽然可见的数据绑定是在输入标签来设置可见性，我也可以设置在那些链接？ – TrangZinita

对不起，你的问题不清楚。我已经更新了我的答案。 – rae1

jsfiddle.net/v9BNr/16我已经修好了，但它仍然不能用于编辑，请你看看我的fidde？这个问题据我所知，因为我的顶部有一个foreach循环。谢谢 – TrangZinita

通过@的Rae-1注意到的问题是相当含糊，但是，服用它，你的要求是其是通过数组迭代这小提琴产生的应解决您的问题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

来源

2014-06-06 23:21:25 Lordbalmon

感谢您的指导，但是，当我用我的示例尝试解析字典时，数据显示不正确，如下所示：http：// jsfiddle。net/v9BNr/17/ – TrangZinita

您能否看看这个主题，谢谢：http://stackoverflow.com/questions/24180199/modify-validate-observable-of-editable-table-in-knockoutjs – TrangZinita

试试这个：

<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

来源

2015-12-11 20:46:30

如何在Knockout中为表进行可视化数据绑定？

回答

相关问题