列の1つとして検索リンクの表があります。検索をクリックすると、Ajax ポップアップ エクステンダー パネルがポップアップし、検索ボックス オプションが表示されます。検索は Web サービス呼び出しによって行われ、結果はパネル内のテーブルにバインドされます。テーブルの行をクリック可能にし、クリックした行を最初のテーブルにバインドしたい。私が抱えている問題は、各行を追跡することです。パネル内の行をクリックすると、その 1 行だけではなく、最初のテーブルのすべての行がバインドされます。クリックした行を追跡する方法がわかりません。どんな助けも本当にありがたいです。私は何日もこれに苦労してきました。これが私のコードです：
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 ループを試みましたが、失敗しました。行のインデックスを取得する必要があると考えていますが、それがどのように行われるかわかりません。助けてください！！
アップデート
これは、私がやろうとしていることへのフィドルへのリンクですhttp://jsfiddle.net/KwvrZ/7/。最初のテーブルの任意の行をクリックできるようにしたいのですが、その行を 2 番目のテーブルにバインドする必要があります。次に、最初のテーブルの別の行をクリックすると、2 番目のテーブルの 2 番目の行にバインドされます。これが理にかなっていることを願っています。
本当に助けが必要です！