淘汰赛添加行答案

【问题标题】：Knockout adding row淘汰赛添加行
【发布时间】：2013-12-27 22:21:35
【问题描述】：

我是淘汰赛的新手，我正在尝试制作表格，当我们单击“Remover”时，它会删除该行，但是当我单击“Adicionar”时，我无法在表格中添加任何行。如果有人可以帮助我，我将不胜感激。

<html>
<head>
    <title> Inseminações </title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id='cssmenu'>
<ul>
  <li><a href="inseminações.html">Inseminações</a>
  <li><a href="tratamentos.html">Tratamentos</a>
  <li><a href="analises.html">Análises Clínicas</a>
</ul>
</div>
<br>
<h1> Inseminações </h1>
<table>
    <thead><tr>
        <th>Data</th>
        <th>SIA Vaca</th>
        <th>SIA Touro</th>
        <th>Nome do Touro</th>
        <th>Documento</th>
        <th>Inseminador</th> 
        <th> </th>
    </tr></thead>
    <tr>
    <tbody data-bind="foreach: dtabela">
    </tr>
    <tr>
        <td data-bind="text: Data"></td>
        <td data-bind="text: SIAV"></td>
        <td data-bind="text: SIAT"></td>
        <td data-bind="text: NomeT"></td>
        <td data-bind="text: Doc"></td>
        <td data-bind="text: Ins"></td>
        <td><button data-bind='click: $root.removeDados'>Remover</button></td>
    </tr>
    </tbody>
         <tbody>
        <tr>
        <td><input data-bind='value: Data'/></td>
        <td><input data-bind='value: SIAV'/></td>
        <td><input data-bind='value: SIAT'/></td>
        <td><input data-bind='value: NomeT'/></td>
        <td><input data-bind='value: Doc'/></td>
        <td><input data-bind='value: Ins'/></td>
        <td><button data-bind='click: $root.addDados'>Adicionar</button></td>

        </tr>
     </tbody>
    </table>
  <script type='text/javascript' src='knockout-3.0.0.js'></script>
  <script type='text/javascript'>
  function Dados(Data,SIAV,SIAT,NomeT,Doc,Ins) {
            this.Data = ko.observable(Data);
            this.SIAV = ko.observable(SIAV);
            this.SIAT = ko.observable(SIAT);
            this.NomeT = ko.observable(NomeT);
            this.Doc = ko.observable(Doc);
            this.Ins= ko.observable(Ins);
        }
        function DadosViewModel () 
        {
            var self= this
            this.dtabela=ko.observableArray([
                new Dados("30-01-13", 354, 564, "Touro 1", "Doc1", "Inseminador A"),
                new Dados("12-05-13", 785, 344, "Touro 3", "Doc5", "Inseminador B"),
            ]);
            this.removeDados=function(Dados) {
                self.dtabela.destroy(Dados);
            };
            this.addDados=function(Dados) {
                self.dtabela.push( new Dados);
            };
        };
        var vm= new DadosViewModel();
        ko.applyBindings(vm);
    </script>
    </body>
</html>

【问题讨论】：

new Dados之后的括号?
您正在将Dados 传递给函数...我认为您想传递该行并创建一个new Dados(col1, col2,...)
@abc123 我在哪里放新的Dados（col1，col2，...）？
knockoutjs.com/documentation/click-binding.html我现在没有时间写演示......对不起编码别的东西

标签： javascript html knockout.js html-table

【解决方案1】：

好的，您的示例已经正常运行，您可以在此处查看演示：http://jsfiddle.net/ThvdF/2/

我不得不做出以下修改

您没有 viewmodel 属性来表示新项目，我添加了一个：

function DadosViewModel () 
{
    var self= this
    ....
    this.newDados = ko.observable( new Dados(); ) // Here

您有 2 个 tbody 标记，我将其中一个更改为 tfoot 并使用 with 绑定将页脚行绑定到 newDados viewmodel 属性
```
<tfoot data-bind="with: newDados">
```

当将此实例传递给addDados 方法时，我重新创建了newDados

function DadosViewModel ()
{
      ...
      this.addDados=function(d) {                
        self.dtabela.push( d );
        self.newDados( new Dados() );
     }

【讨论】：

@Vasco - 查看更新 - 简化了不少。不需要clear 方法，只需在页脚中重新创建空的Dados
@Vasco - 不客气（我也在学习淘汰赛，所以这个答案帮助我学习！）
我有一个问题，当我删除一行时，我无法添加另一行，如果我添加空行并删除其中一个，它们都会被删除。编辑：算了，我已经修好了。 :D
这个问题的jsfiddle示例中不存在这个问题。听起来您的代码有些不同。也许发布另一个问题？
谢谢。如果我想使用我填写的相同值添加多行怎么办？