的JavaScript

Question

我有一个搜索链接表作为其中一个列。当我点击搜索时，弹出一个带有搜索框选项的ajax popup extender面板。搜索是通过webservice调用完成的，结果绑定在面板内的表中。我使表行可单击，我希望将单击的行绑定到第一个表。我遇到的问题是跟踪每一行。当我单击面板内的一行时，第一个表中的所有行都被绑定，而不是只有那一行。我无法弄清楚如何跟踪我点击的哪一行。我非常感谢任何帮助，我几天都在苦苦挣扎。这是我的代码：

的JavaScript

    $(document).ready(function () {
           MyAccountModel = new AccountViewModel()
     ko.applyBindings(MyAccountModel );
 })

      var passedmodel;
      var MyAccountModel;
    var AccountViewModel = function () {
                 var self = this;
                 self.model = {};
                 self.invoice = ko.observableArray([new invoice()]);
                //Ajax Call to search accounts (working and binding fine)
                 self.GetAccounts = function () {
   var searchstring = document.getElementById("<%=txtaccountsearch.ClientID %>").value;
                     var DTO = { 'searchstring': searchstring };
                     var AccountURL = "ajaxwebservicecalls.asmx/GetAccount";
                     $.ajax({
                         type: "Post",
                         url: AccountURL,
                         data: JSON.stringify(DTO),
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function add(msg) {
                             passedmodel = ko.mapping.fromJS(msg.d);
                             MyMasterviewModel.MyAccountModel.invoice(passedmodel);

                         },
                         error: ONAccountFailure

                     });
                 }

                 function ONAccountFailure(xhr, ex) {
                     alert(xhr.responseText);
                  }

      self.CurrentDisplayAccount = ko.observableArray([new CurrentDisplayAccount()])
                 //this is to select a row inside the panel
                 self.selectAccount = function (item) {
                     self.CurrentDisplayAccount(item);
                 };

HTML

我不会显示Popup Extender / Panel代码以节省空间。这是knokcout表绑定

        <table id="Table3"> 
        <tr>
        <th> Account Code </th>
        <th> Description </th>
        <th> Account Type </th>
        <th> Purpose </th>

       </tr>
    <tbody  data-bind="foreach:MyAccountModel.invoice().GLAccounts">
    <tr data-bind="click: MyMasterviewModel.MyAccountModel.selectAccount">

    <td  data-bind=" text:  $data.FormattedGLAccount"></td>
    <td data-bind="text:  $data.GLAccountDescription"></td>
    <td data-bind="text:  $data.GLAccountTypeName" ></td>
    <td data-bind="text:  $data.GLAccountLongDescription" ></td>
       </tr>
       </tbody>
       </table>

现在每当我点击上表中的任何一行时，结果都绑定到下表中的两行。但是，我只想将它绑定到我点击搜索的行。

  <td align="left">
  <table border="0" cellspacing="0" cellpadding="0">
      <th> Account </th>
      <th> Amount </th>
      <th> Reference </th>
      <th> Description </th>     
    <tbody databind="foreach: MyAccountModel.CurrentDisplayAccount()" >
    <td >
    <input  data-bind="text: $data.FormattedGLAccount" />
     </td>
     <td >
<input data-bind="text:$data.GLAccountDescription"/>
    </td>
    <td >
<input  data-bind="text:   $data.GLAccountTypeName" />
 </td>
  <td >
<input  data-bind="text:   $data.GLAccountLongDescription" />     </td>
  <td>
 <asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();" Text="Search"  />
       </td>
         </tbody>

     <--second row:-->
 <tr>
 <td >
<input  data-bind="text: $data.FormattedGLAccount" />    </td>
<td >
 <input  data-bind="text: $data.GLAccountDescription" />     </td>
 <td >
 <input  data-bind="text:   $data.GLAccountTypeName" />     </td>
 <td >
  <<input  data-bind="text:   $data.GLAccountLongDescription" />
 </td>
 <td >        
 <asp:HyperLink runat="server" ID="HyperLink2" NavigateUrl="javascript:$find  ('ModalPopupExtenderaccountsearchbehav').show();" Text="Search"  />

                     </td>
                </tr>
            </table>
        </td>

我尝试改变语法绑定，但它仍然保持绑定。我尝试了一个foreach循环，但没有成功。我认为我需要获得thr row的索引，但我不知道如何做到这一点。请帮助!!

更新

这是一个链接，指向我想要做的事情http://jsfiddle.net/KwvrZ/7/。我希望能够单击第一个表中的任何行，并且该行应绑定到第二个表。如果我然后单击第一个表中的另一行，则应将其绑定到第二个表的第二行。希望这是有道理的。

我真的需要一些帮助！

Answer 1

您的问题描述不是很清楚。您的更新有所帮助，但我无法弄清楚您想要完成的任务。

您是否只会显示2行？如果是这样，您需要在两个可观察量中跟踪每个选择。

标记：

<tbody>
    <tr data-bind="with: CurrentDisplayAccount1">
        <td>
            <input data-bind="value: FormattedGLAccount" />
        </td>
        <td>
            <input data-bind="value: GLAccountDescription" />
        </td>
        <td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>

        </td>
    </tr>
    <tr data-bind="with: CurrentDisplayAccount2">
        <td>
            <input data-bind="value: FormattedGLAccount" />
        </td>
        <td>
            <input data-bind="value: GLAccountDescription" />
        </td>
        <td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>

        </td>
    </tr>
</tbody>

在ViewModel中：

 self.CurrentDisplayAccount1 = ko.observable();
 self.CurrentDisplayAccount2 = ko.observable();
 self.selectAccount = function (item) {
     if(!self.CurrentDisplayAccount1()) {
        self.CurrentDisplayAccount1(item);
     } else if(!self.CurrentDisplayAccount2()){
         self.CurrentDisplayAccount2(item);
     }
 };

这是你的小提琴：http://jsfiddle.net/JoeDoyle23/KwvrZ/11/

或者，您是否希望将每个选定的行添加到表中，没有限制？在这种情况下，CurrentDisplayAccount需要是一个可观察的数组，而您的第二个表需要使用foreach绑定。单击一行时，该行将添加到CurrentDisplayAccount数组中。如果你想让第二个表不允许重复，你只需要在添加它之前在数组中检查它。

标记：

<tbody data-bind="foreach: CurrentDisplayAccount">
    <tr>
        <td>
            <input data-bind="value: FormattedGLAccount" />
        </td>
        <td>
            <input data-bind="value: GLAccountDescription" />
        </td>
        <td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>

        </td>
    </tr>

在ViewModel中：

 self.CurrentDisplayAccount = ko.observableArray([]);
 self.selectAccount = function (item) {
     self.CurrentDisplayAccount.push(item);
 };

这是你的小提琴工作方式（减去重复检查）：http://jsfiddle.net/JoeDoyle23/KwvrZ/12/

希望这些例子可以帮你解决问题。

将表中单击行的结果绑定到另一个表中的另一行

的JavaScript

HTML

我不会显示Popup Extender / Panel代码以节省空间。这是knokcout表绑定

更新

1 个答案: