0
私はknockoutjsを使ってforeachループを使ってテーブルに複数のレコードを表示しています。テーブルフット Adduserをクリックすると、以前のバージョンのソフトウェアで新しいユーザーを入力できるAdduserボタンtr内の入力フィールドを表示してユーザーを追加することができます。 私の仕事は、モーダルポップアップで入力フォームを表示することです。しかし、私の問題は、データバインドがテーブル本体タグとadduserコマンドボタンであるし、モーダルポップアップdiv要素がテーブルbosyタグ の外にあるので、それには、以下のKnockoutjsで新しいユーザーを追加できません
"Error: Unable to parse bindings. Message: ReferenceError: LoginName is not defined; Bindings value: value: LoginName, valueUpdate: 'keyup'"
のようなエラーが発生しますjsの次のコード
<table class="report-table cstm-report-tbl" data-bind="if: CompanyId()">
<thead>
<tr>
<th>
Login
</th>
<th>
Email
</th>
<!-- ko if: $root.EditId() !== null -->
<!-- /ko -->
</tr>
</thead>
<tbody data-bind="foreach: Users">
<tr>
<!-- ko if: $root.EditId() === Id() -->
<td><span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null }, attr: {'data-target': '#myModal' + Id()}" data-toggle="modal"></span></td>
<td>
<span data-bind="text: EditEmail" />
</td>
<!-- /ko -->
<!-- ko ifnot: $root.EditId() === Id() -->
<td><span data-bind="click: $root.Edit, text: LoginName, css: { clickable: $root.EditId() === null }, attr: {'data-target': '#myModal' + Id()}" data-toggle="modal"></span></td>
<td data-bind="text: Email"></td>
<!-- ko if: $root.EditId() === 0 -->
<!--<td></td>
<td></td>
<td></td>-->
<!-- /ko -->
<!-- /ko -->
</tr>
<tr class="modal fade cstm-resident-modal cstm-admin-popbox" data-bind="attr: { id: 'myModal' + Id()}" role="dialog" tabindex="-1">
<td colspan="3" class="modal-dialog" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Client Admins</h4>
</div>
<div class="modal-content">
<div class="input-wrpr">
<div class="label">
<label>Login Name</label>
</div>
<div class="field">
<input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text">
<span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"></span>
</div>
</div>
<div class="input-wrpr">
<div class="label">
<label>Email</label>
</div>
<div class="field">
<input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text">
</div>
</div>
<div class="input-wrpr">
<div class="label">
<label>Password</label>
</div>
<div class="field">
<input data-bind="value: Password, valueUpdate: 'keyup'" type="text">
</div>
</div>
<div class="input-wrpr">
<div class="label">
<label>Is Approved</label>
</div>
<div class="field">
<input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox">
<span data-bind="visible: $root.EditId() === 0">N/A</span>
</div>
</div>
<div>
<div id="InlineEditActionPanel">
<span class="" data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
<span class="clickable" data-bind="click: $root.CancelEdit" data-dismiss="modal">Cancel</span>
</div>
</div>
</div>
</td>
</tr>
<!--<tr>
<td class="add-user-popbx" data-bind="attr: { colspan: $root.EditId() === null ? 4 : 5 }">
<span class="add-usr-btn" data-bind="click: $root.Add, css: { clickable: $root.EditId() === null }, attr: {'data-target': '#myModal' + Id()}" data-toggle="modal">Add new user</span>
</td>
</tr>-->
</tbody>
<tfoot>
<tr>
<td class="add-user-popbx" data-bind="attr: { colspan: $root.EditId() === null ? 4 : 5 }">
<span class="add-usr-btn" data-bind="click: $root.Add, css: { clickable: $root.EditId() === null }" data-toggle="modal" data-target="#myModal2">Add new user</span>
</td>
</tr>
<tr class="modal fade cstm-resident-modal cstm-admin-popbox" id="myModal2" role="dialog" tabindex="-1">
<td colspan="3" class="modal-dialog" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Client Admins</h4>
</div>
<div class="modal-content">
<div class="input-wrpr">
<div class="label">
<label>Login Name</label>
</div>
<div class="field">
<input data-bind="visible: Id() === 0, value: LoginName, valueUpdate: 'keyup'" type="text">
<span data-bind="visible: Id() !== 0, text: LoginName" style="display: none;"></span>
</div>
</div>
<div class="input-wrpr">
<div class="label">
<label>Email</label>
</div>
<div class="field">
<input data-bind="value: EditEmail, valueUpdate: 'keyup'" type="text">
</div>
</div>
<div class="input-wrpr">
<div class="label">
<label>Password</label>
</div>
<div class="field">
<input data-bind="value: Password, valueUpdate: 'keyup'" type="text">
</div>
</div>
<div class="input-wrpr">
<div class="label">
<label>Is Approved</label>
</div>
<div class="field">
<input data-bind="checked: IsApproved, visible: $root.EditId() !== 0" style="display: none;" type="checkbox">
<span data-bind="visible: $root.EditId() === 0">N/A</span>
</div>
</div>
<div>
<div id="InlineEditActionPanel">
<span class="clickable" data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span>
<span class="clickable" data-bind="click: $root.CancelEdit" data-dismiss="modal">Cancel</span>
</div>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
ですコード
ResPortal.Admin.MaAdmin = function() {
var maAdminViewModel = function() {
var that = this;
this.Busy = ko.observable(false);
this.Companies = ko.observableArray();
this.CompanyId = ko.observable(0);
this.CompanyName = ko.computed(function() {
var i;
if (that.Busy()) {
return "";
}
for (i = 0; i < that.Companies().length; i++) {
if (that.Companies()[i].Id == that.CompanyId()) {
return that.Companies()[i].Name;
}
}
});
this.EditId = ko.observable();
this.Users = ko.observableArray();
this.Add = function() {
var newUser;
if (that.EditId() !== null) {
return;
}
newUser = {
EditEmail: ko.observable(""),
Email: ko.observable(""),
Id: ko.observable(0),
IsApproved: ko.observable(true),
LoginName: ko.observable(""),
Password: ko.observable("")
};
that.Users.push(newUser)
that.EditId(0);
};
this.Edit = function (user) {
if (that.EditId() !== null || that.EditId() === user.Id()) {
return;
}
that.EditId(user.Id());
};
this.Save = function (user) {
$.ajax({
type: "POST",
url: "Default.aspx/SaveAdmin",
data: JSON.stringify({
companyId: that.CompanyId(),
userId: user.Id(),
login: user.LoginName(),
email: user.EditEmail(),
newPassword: user.Password(),
isActive: user.IsApproved()
}),
contentType: "application/json; charset=utf-8",
dataType: "json"
}).fail(function (data) {
ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
}).success(function (data) {
if (data.d.Success) {
ResPortal.Helpers.notify(data.d.Message || "User updated", "success");
user
.Email(user.EditEmail())
.Password("");
if (user.Id() === 0) {
user.Id(data.d.Data);
} else {
if (!user.IsApproved()) {
that.Users.remove(user);
}
}
that.CancelEdit();
} else {
ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
}
});
};
this.CancelEdit = function() {
var user = _.find(that.Users(), function (u) {
return u.Id() === that.EditId();
});
if (user) {
user.EditEmail(user.Email());
if (user.Id() === 0) {
that.Users.remove(user);
}
}
that.EditId(null);
};
this.CompanyId.subscribe(function (value) {
if (!value) {
return null;
}
that.Busy(true);
that.EditId(null);
$.ajax({
type: "POST",
url: "Default.aspx/GetClientAdmins",
data: JSON.stringify({ companyId: that.CompanyId() }),
contentType: "application/json; charset=utf-8",
dataType: "json"
}).fail(function (data) {
ResPortal.Helpers.notify(data.d.Message || "Server error", "error");
}).done(function (data) {
var users = data.d.Data.Users;
// Attach additional properties for editing
_.each(users, function (user) {
user.EditEmail = ko.observable(user.Email);
user.Email = ko.observable(user.Email);
user.Id = ko.observable(user.Id);
user.IsApproved = ko.observable(user.IsApproved);
user.LoginName = ko.observable(user.LoginName);
user.Password = ko.observable("");
});
that.Users(users);
that.Busy(false);
});
});
this.IsValid = ko.computed(function() {
var user,
create;
user = _.find(that.Users(), function (u) {
return u.Id() === that.EditId();
});
if (!user) {
return false;
}
create = user.Id() === 0;
if (create) {
return user.LoginName().length && user.EditEmail().length && user.Password().length;
} else {
return user.EditEmail().length;
}
});
},
vm = new maAdminViewModel();
ko.applyBindings(vm, document.getElementById("AdminPanel"));
vm.Busy(true);
$.get("../Services/CompanyService.svc/GetCompanies", function (data) {
_.each(data, function (co) {
vm.Companies.push(co);
});
}).fail(function (d) {
ResPortal.Helpers.notify(["Server error", "(Click this message to close)"], "error", true);
}).always(function() {
vm.Busy(false);
});
// Polyfills
}
あなたはforeach経由tbodyの各行にユーザーを拘束している私に
jsモデルを表示します。 – lorond
@lorond質問が編集されました。 –