ボタンをクリックすると、Bootstrap Modal Dialog (UserPermission) が表示されます。ここでは、ユーザーのリストを表示する jqxTreeGrid を表示しています。各ユーザーにはいくつかの権限設定があります。
したがって、Bootstrap Modal Dialog をセットアップするための次のリソースがあります。
UserPermissionModel.js という名前のバックボーン モデルがあります。
define(['app', 'underscore', 'backbone'],
function(app, _, Backbone) { "use strict"; var UserPermissionModel = Backbone.Model.extend({ defaults: { userList:[], permissions:[] } }); return UserPermissionModel;});
次のメソッドを使用して、View UserPermissionView を持っています
initialize: function () { var self = this; self.model = new UserPermissionModel(); }レンダリング後、モデル内の userList 配列に保存しているユーザーのリストを提供する Web サービスを呼び出しています。権限を設定するのはこれが初めてなので、Permission 配列をデフォルト値に設定します。
afterRender: 関数 () { var self = this;
self.model.set("userList", []); self.model.set("permissions", []); // Get all the users save them in model AllUsers.fetch(function (Users) { Users.each(function (user) { // create the permission object reference var permission = new PermissionInfo(); // set defaults permission.createJSON({ userId: user.attributes.id, read: "", write: "" }); // Save the group in model self.model.get("userList").push(user); // Save the permission in model self.model.get("permissions").push(permission); }); // Show the groups in jqxTreeGrid self.loadListGrid(); }, function (error) { // error handling });}、
userList を取得したら、メソッド loadListGrid を使用して jqxTreeGrid に表示します。
jqxTreeGrid ready メソッド内で、ポップオーバーを初期化しています。以下は、Backbone ビューの loadListGrid メソッドに入れている jqxTreeGrid コードです。
$("#jqxListGrid").jqxTreeGrid({
width: '100%',
source: dataAdapter,
theme: 'iltreegrid',
columnsHeight: 35,
ready: function() {
// initialize the Permission Setting Popover
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]',
content: $('#ad_permissionSettingPopover').html()
}
// bind the popover on body
$("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function () {
//that.setDocumentPermissions();
app.pubSub.trigger("permissionPopover:onOk");
$("[rel=popover]").popover("destroy");
$(".popover").remove();
}).on("show.bs.popover", function (e) {
// hide all other popovers before showing the current popover
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
}).on("shown.bs.popover", function (e) {
// set the z-index of the popover as it is going behid the jqxTreeGrid Column
$('.popover').css('z-index', '999999');
// add the style class
$('.popover').addClass('jqxtreegridCell-popover');
// get the current value of permission settings and
// mark the radio button checked
app.pubSub.trigger("permissionPopover:onShow");
});
// click on cancel button removes the popover
$("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function () {
$("[rel=popover]").popover("destroy");
$(".popover").remove();
});
},
columns: [
{
text: '<span class="ilicon ilicon-user"></span>' + app.i18n.t("doc_permission_userName", " User Name"),
datafield: 'userName',
cellsrenderer: userIconRenderer,
width:'40%'
},
{
text: '',
datafield: 'id',
width: '0%',
hidden: true
},
{
text: '<span>' + app.i18n.t("doc_permission_userType", "User Type") + '</span>',
datafield: 'userType',
width: '18%'
},
{
text: '<span>' + app.i18n.t("doc_permission_email", "Email") + '</span>',
datafield: 'userEmail',
width: '18%'
},
{
text: '<span>' + app.i18n.t("doc_permission_permissionSetting", "Permission Setting") + '</span>',
width: '24%',
cellsrenderer: permissionSettingRenderer,
sortable: false
}
]
});
グリッド内の各ユーザーには、いくつかのラジオ ボタンを含むポップオーバーを表示するボタンがあります。そのユーザーのデフォルトの権限がチェックされます（モデルに保存されている権限配列から読み取ります）。このユーザーに対して別のアクセス許可を選択し、その特定のユーザーのモデルでアクセス許可配列を更新します。
機能を説明できたことを願っています。
さて、モーダルを初めて開いたとき。すべてが完璧に機能します。しかし、モーダルを閉じて再度開くと、ここで問題が発生します。「shown.bs.popover」メソッド内の権限を読み取ると、バックボーン モデルの Permission 配列に設定したことのない値が含まれています。それは私に間違った価値を与えています。しかし、他の方法では正しい値を持っています
ここでシナリオを再現するために最善を尽くしました。誰かが何か考えているなら、コメントしてください。
ありがとうヤミーン