Question

假设我有以下代码

var Names = ['test1','test2','test3'];
function ViewModel() {

    var self = this;

    self.RegistraionInfo = ko.observableArray(Names);
    self.ChangeSelection = function (data,event) {
        fnChangeSelection(data);
    }
    self.tableRows = ko.observableArray([]);

    self.addNewRow = function () {
        self.tableRows.push(new tableRow('', self));
    }

    self.addNewRow();
 }

 function tableRow(number, ownerViewModel) {
    var self = this;
    self.number = ko.observable(number);
    self.remove = function () {
        ownerViewModel.tableRows.destroy(this);
    }
 ko.applyBindings(new ViewModel());

和html

                      <table >
                        <thead>
                            <tr class="active">
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody data-bind="template:{name:'data-tableRow', foreach: tableRows}"></tbody>
                        <tfoot>
                            <tr>
                                <td >
                                    <img id="btnAddRowProcedure1" src=@Url.Content("~/Content/img/plus.png") data-bind="click: addNewRow" />
                                </td>
                            </tr>
                        </tfoot>
                    </table>

<script id="data-tableRow" type="text/html">
    <tr>
        <td >
            <img id="btnDelete" src=@Url.Content("~/Content/img/close.png") data-bind="click: function(){ $data.remove(); }" />
        </td>
        <td><select data-bind="options:$root.RegistraionInfo, , event:{ change:$root.ChangeSelection}"></select></td>
    </tr>
</script>

我在这里尝试做的是当用户点击＃btnAddRowProcedure1链接时，将添加一个新的tablerow。在表行内部有一个绑定到Names数组的下拉列表。当用户更改下拉选择时，将调用ChangeSelection函数。问题是我想要敲出来发送当前选择的Names数组元素作为数据但是淘汰发送tableRow作为数据。有没有办法克服这个问题。我仍然不确定为什么这样工作。

更新

在@Roy J改变之后我能够让它工作。但是现在我偶然发现了另一个问题（对不起我是一个淘汰赛的淘汰赛）。我想在用户改变选择时添加一个按钮所以我已将以下代码添加到ViewModel

    self.displayAddBtn = ko.computed(function () {
        if (self.tableRows.length == 0)
        {
            return false;
        }

        return self.tableRows[self.tableRows.length-1].selected() !="";
    }, self);

此代码只执行一次。当用户更改选择时，这是代码未执行。有人告诉我如何使这项工作

Answer 1

您的选择需要value绑定。在调用更改函数时，新值将显示的位置。

＆＃13;

var Names = ['test1', 'test2', 'test3'];

function ViewModel() {

  var self = this;

  self.RegistraionInfo = ko.observableArray(Names);
  self.ChangeSelection = function(data, event) {
    console.debug("Changed to:", data.selected());
  }
  self.tableRows = ko.observableArray([]);

  self.addNewRow = function() {
    self.tableRows.push(new tableRow('', self));
  }

  self.addNewRow();
}

function tableRow(number, ownerViewModel) {
  var self = this;
  self.number = ko.observable(number);
  self.remove = function() {
    ownerViewModel.tableRows.destroy(this);
  };
  self.selected = ko.observable(); // new! bound to select
}
ko.applyBindings(new ViewModel());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
  <thead>
    <tr class="active">
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody data-bind="template:{name:'data-tableRow', foreach: tableRows}"></tbody>
  <tfoot>
    <tr>
      <td>
        <img id="btnAddRowProcedure1" src=@Url.Content( "~/Content/img/plus.png") data-bind="click: addNewRow" />
      </td>
    </tr>
  </tfoot>
</table>

<template id="data-tableRow">
  <tr>
    <td>
      <img id="btnDelete" src=@Url.Content( "~/Content/img/close.png") data-bind="click: function(){ $data.remove(); }" />
    </td>
    <td>
      <select data-bind="options:$root.RegistraionInfo, value:selected, event:{ change:$root.ChangeSelection}"></select>
    </td>
  </tr>
</template>

＆＃13;

使用模板绑定时敲除js bindng问题

1 个答案: