1

我想创建一个带有淘汰赛的动态表，我可以在其中将元素添加到 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>

视图模型：

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>
4

1 回答 1

2

好的，首先您使用该模板创建多个具有 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

于 2013-08-23T12:09:37.557 回答