[英]Populate textbox using knockout “data-bind=click”
我想知道您能否幫忙。 剛開始使用KnockoutJS時,我就無法根據選定的填充文本框。 我相信這對於訓練有素的眼睛來說是非常明顯的,但是我似乎無法找到問題的原因。 下面是我的實現。
public class RoleViewModel
{
public int RoleID { get; set; }
public string RoleName { get; set; }
public string Description { get; set; }
public int ApplicationID { get; set; }
public string ApplicationName { get; set; }
}
public class RoleIndexViewModel
{
public List<RoleViewModel> RolesList { get; set; }
public RoleViewModel Rvm { get; set; }
}
下面的Index.cshtml
@model ExpensesOrganiser4.ViewModels.RoleIndexViewModel
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
<script src="~/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="~/Scripts/Application/role.js" type="text/javascript"></script>
<script type="text/javascript">
RoleVM.ViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
</script>
}
<table>
<tr>
<th>@Html.DisplayNameFor(model => model.Rvm.RoleName)</th>
<th>@Html.DisplayNameFor(model => model.Rvm.Description)</th>
<th>@Html.DisplayNameFor(model => model.Rvm.ApplicationName)</th>
</tr>
@foreach (var item in Model.RolesList) {
<tr data-bind="click: GetSelectedRole" id="updtr">
<td>@Html.DisplayFor(modelItem => item.RoleName)</td>
<td>@Html.DisplayFor(modelItem => item.Description)</td>
<td>@Html.DisplayFor(modelItem => item.ApplicationName)</td>
</tr>
}
</table>
<table data-bind="visible: ReadOnlyMode">
<tr>
<td><label for="RoleID">Role ID:</label></td>
<td><input data-bind="value: RoleID()" type="text" id="RoleID" /></td>
</tr>
<tr>
<td><label for="RoleName">Role Name:</label></td>
<td><input data-bind="value: RoleName()" type="text" id="RoleName" /></td>
</tr>
<tr>
<td><label for="Description">Role Description:</label></td>
<td><input data-bind="value: Description()" type="text" id="Description" /></td>
</tr>
<tr>
<td><label for="ApplicationName">Application:</label></td>
<td><input data-bind="value: ApplicationName()" type="text" id="ApplicationName" /></td>
</tr>
</table>
淘汰賽的定義
var RoleVM = {
EditFields: ko.observable(false),
ReadOnlyMode: ko.observable(true),
DisplayEditRoleButton: ko.observable(true),
DisplayUpdateRoleButton: ko.observable(false),
RoleID: ko.observable($("#RoleID").val()),
RoleName: ko.observable($("#RoleName").val()),
OriginalRoleName: ko.observable($("#RoleName").val()),
Description: ko.observable($("#Description").val()),
OriginalDescription: ko.observable($("#Description").val()),
ApplicationName: ko.observable($("#ApplicationName").val()),
OriginalApplicationName: ko.observable($("#ApplicationName").val()),
MessageBox: ko.observable(""),
SelectedRow: ko.observable(),
GetSelectedRole: function (roleData) {
RoleVM.RoleID(roleData.RoleID);
RoleVM.RoleName(roleData.RoleName);
RoleVM.Description(roleData.Description);
RoleVM.ApplicationName(roleData.ApplicationName);
}
};
function roleData(data) {
this.RoleID = ko.observable(data.RoleID);
this.RoleName = ko.observable(data.RoleName);
this.Description = ko.observable(data.Description);
this.ApplicationName = ko.observable(data.ApplicationName);
}
ko.applyBindings(RoleVM);
單擊時,在文本框中顯示以下內容
function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer
(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}"
我知道如果我調用一個可觀察對象,則需要將其作為函數調用,但是當我執行以下操作時,文本框將包含空字符串。
GetSelectedRole: function (roleData) {
RoleVM.RoleID(roleData.RoleID());
RoleVM.RoleName(roleData.RoleName());
RoleVM.Description(roleData.Description());
RoleVM.ApplicationName(roleData.ApplicationName());
}
任何建議深表感謝。 謝謝
我不確定您當前解決方案中的數據來自何處,因此我進行了一些調整。
首先,我建議遵循將函數用於任何復雜度的視圖模型的模式,因為它會使事情變得更容易。
var RoleVM = function () {
var self = this;
self.EditFields = ko.observable(false);
self.ReadOnlyMode = ko.observable(true),
self.DisplayEditRoleButton = ko.observable(true),
self.DisplayUpdateRoleButton = ko.observable(false),
self.RoleID = ko.observable($("#RoleID").val()),
self.RoleName = ko.observable($("#RoleName").val()),
self.OriginalRoleName = ko.observable($("#RoleName").val()),
self.Description = ko.observable($("#Description").val()),
self.OriginalDescription = ko.observable($("#Description").val()),
self.ApplicationName = ko.observable($("#ApplicationName").val()),
self.OriginalApplicationName = ko.observable($("#ApplicationName").val()),
self.MessageBox = ko.observable(""),
self.SelectedRow = ko.observable(),
self.GetSelectedRole = function (roleId, roleName, description, applicationName) {
self.RoleID(roleData.RoleId);
self.RoleName(roleData.RoleName);
self.Description(roleData.Description);
self.ApplicationName(roleData.ApplicationName);
}
};
您將按以下方式綁定它:
ko.applyBindings(new RoleVM());
然后,您可以使用包裝函數調用GetSelectedRole
以便可以使用某些Razor傳遞數據。
@foreach (var item in Model.RolesList) {
<tr data-bind="click: function () { GetSelectedRole(@item.RoleID, @item.RoleName, @item.Description, @item.ApplicationName) }" id="updtr">
<td class="role-name">@Html.DisplayFor(modelItem => item.RoleName)</td>
<td class="description">@Html.DisplayFor(modelItem => item.Description)</td>
<td class="application-name">@Html.DisplayFor(modelItem => item.ApplicationName)</td>
</tr>
}
在您的解決方案中,將GetSelectedRole
綁定到該行的click事件。 觸發click事件時, GetSelectedRole
使用兩個參數(數據(您的視圖模型)和eventArgs)調用GetSelectedRole
。 您有一個永不調用的函數rollData
,因為它被GetSelectedRole
內部的同名參數隱藏。 因此,您要將視圖模型的可觀察值設置為可觀察值本身。 因此,從本質上講,您具有嵌套的可觀察值,因此,當您嘗試獲取可觀察值時,它將返回給您另一個可觀察值,當將其轉換為字符串時,它會向您顯示在文本框中看到的可觀察包裝函數。
嘗試像這樣更改
data-bind="click: GetSelectedRole.bind($data)"
也可以使用this
功能更改
GetSelectedRole: function (roleData) {
this.RoleID(roleData.RoleID);
this.RoleName(roleData.RoleName);
this.Description(roleData.Description);
this.ApplicationName(roleData.ApplicationName);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.