Question

我想创建一个带有knockout的动态表，我可以在observableArray中添加元素。我的代码指出我可以创建元素，但我不能删除它们，以及模板中创建的元素不能正确“观察”，我的意思是根本没有。

这是我的代码：

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td><a id="ATS" href="#Add"><i class="icon-plus-sign"></i></a></td>
                        <td>Name</td>
                        <td>Duration</td>
                        <td>Qty Employees</td>
                        <td>Requires Labor</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: Jobsteps">
                    <tr data-bind="template: 'AddStep'">
                        <%--template goes here--%>

                    </tr>
                </tbody>
            </table>

Viewmodel：

var MyDataViewModel = {
        Jobsteps: ko.observableArray()
        }
  $('#ATS').on('click', function () {
            MyDataViewModel.Jobsteps.push({ StepName: "", Duration: "", QTYEmployees: "", RequiresLabor: true });
        });
    $('#RTS').on('click', function () {
        MyDataViewModel.Jobsteps.remove(this);
    });

模板

    <td><a href="#Add"><i class="icon-plus-sign"></i></a></td>
    <td>
        <input type="text" data-bind="value: StepName" /></td>
    <td>
        <input type="text" data-bind="value: Duration" class="input-mini" />
    </td>
    <td>
        <input type="text" data-bind="value: QTYEmployees" class="input-mini" />
    </td>
    <td>
        <input type="checkbox" data-bind="checked: RequiresLabor" />
    </td>
    <td>
        <a id="RTS" href="#Rem"><i class="icon-minus-sign"></i></a>
    </td>

Answer 1

好的，首先你用该模板创建了多个具有ID RTS的项目，所以我相信jquery会感到困惑。

其次我也相信jquery出价不会生效，因为你试图绑定的项目还不存在。

以下是我的建议：

        <table class="table table-bordered">
            <thead>
                <tr>
                    <td><a href="#" data-bind="click: MyDataViewModel.AddClick"><i class="icon-plus-sign"></i></a></td>
                    <td>Name</td>
                    <td>Duration</td>
                    <td>Qty Employees</td>
                    <td>Requires Labor</td>
                    <td></td>
                </tr>
            </thead>
            <tbody data-bind="foreach: Jobsteps">
                <td><a href="#Add"><i class="icon-plus-sign"></i></a></td> <!-- no idea what this is for btw -->
                <td>
                     <input type="text" data-bind="value: StepName" /></td>
                <td>
                     <input type="text" data-bind="value: Duration" class="input-mini" />
                </td>
                <td>
                    <input type="text" data-bind="value: QTYEmployees" class="input-mini" />
                </td>
                <td>
                    <input type="checkbox" data-bind="checked: RequiresLabor" />
                </td>
                <td>
                    <a href="#" data-bind="click: MyDataViewModel.EditClick"><i class="icon-minus-sign"></i></a>
                </td>
            </tbody>
        </table>

然后你的淘汰赛

var MyDataViewModel = {
    Jobsteps: ko.observableArray(),
    AddClick: function(){
        MyDataViewModel.Jobsteps.push( ko.utils.unwrapObservable( ko.mapping.fromJS( { StepName: "", Duration: "", QTYEmployees: "", RequiresLabor: true })));
    },
    EditClick: function(item){
        MyDataViewModel.Jobsteps.remove(item);
    }
}

当您实现此操作以将表的主体移回模板时，请随意，还记得永远不要在元素集上多次调用ko.applyBindings

Knockout Template绑定不跟踪可观察数组中的元素

1 个答案: