I am unable to bind a function to my Kendo viewmodel. It does not give an error message and simply does not bind even though other viewmodels on my page are working.
var Ccf;
(function (Ccf) {
var ViewModels;
(function (ViewModels) {
var User;
(function (User) {
var defaultAddModel = {
labelIds: []
};
var InfoViewModel = (function (_super) {
__extends(InfoViewModel, _super);
// parentViewModel must begin with an underscore, otherwise kendo will wrap it in an observable object.
function InfoViewModel(_parentViewModel) {
_super.call(this);
this._parentViewModel = _parentViewModel;
this.data = new kendo.data.ObservableObject();
this.messages = new kendo.data.ObservableArray([]);
_super.prototype.init.call(this, this);
}
InfoViewModel.prototype.add = function (e) {
e.preventDefault();
if (!this._parentViewModel.addViewModel) {
// Initialize and bind the view model for the modal window.
this._parentViewModel.addViewModel = new AddViewModel(this._parentViewModel, defaultAddModel);
kendo.bind(this._parentViewModel.addModal, this._parentViewModel.addViewModel);
}
else {
this._parentViewModel.addViewModel.set("data", defaultAddModel);
this._parentViewModel.addViewModel.set("messages", []);
}
this._parentViewModel.addModal.modal("show");
};
InfoViewModel.prototype.destroy = function (e) {
var _this = this;
e.preventDefault();
if (confirm("Are you sure you want to delete the Note " + e.data.note + "?")) {
kendo.ui.progress(this._parentViewModel.container, true);
$.ajax({
url: Ccf.Utility.serviceUrl + "UserLabel/" + e.data.id,
method: "DELETE",
contentType: "application/json; charset=UTF-8",
dataType: "json"
})
.done(function (data, textStatus, jqXHR) {
// No need to hide the spinner. The refresh function will handle that.
_this._parentViewModel.refresh();
})
.fail(function (data, textStatus, errorThrown) {
toastr.error(Ccf.Utility.getAjaxMessages(data)[0], "Delete Failed");
kendo.ui.progress(_this._parentViewModel.container, false);
});
}
};
return InfoViewModel;
}(kendo.data.ObservableObject));
var AddViewModel = (function (_super) {
__extends(AddViewModel, _super);
// parentViewModel must begin with an underscore, otherwise kendo will wrap it in an observable object.
function AddViewModel(_parentViewModel, data) {
_super.call(this);
this._parentViewModel = _parentViewModel;
this.data = data;
this.messages = new kendo.data.ObservableArray([]);
_super.prototype.init.call(this, this);
}
AddViewModel.prototype.save = function (e) {
var _this = this;
e.preventDefault();
var messages = [];
if (messages.length > 0) {
this.set("messages", messages);
return;
}
this.data.userId = this._parentViewModel.options.userId;
kendo.ui.progress(this._parentViewModel.addModal, true);
$.ajax({
url: Ccf.Utility.serviceUrl + "User/AddUserNote/",
method: "POST",
data: kendo.stringify(this.get("data")),
contentType: "application/json; charset=UTF-8",
dataType: "json"
})
.done(function (data, textStatus, jqXHR) {
_this._parentViewModel.refresh();
_this._parentViewModel.addModal.modal("hide");
})
.fail(function (data, textStatus, errorThrown) {
_this.set("messages", Ccf.Utility.getAjaxMessages(data));
})
.always(function (data, textStatus, errorThrown) {
kendo.ui.progress(_this._parentViewModel.addModal, false);
});
};
return AddViewModel;
}(kendo.data.ObservableObject));
var UserProfileNotesViewModel = (function () {
function UserProfileNotesViewModel(options) {
this.options = options;
this.isInitialized = false;
}
UserProfileNotesViewModel.prototype.initialize = function () {
var _this = this;
if (!this.isInitialized) {
this.container = $("#user-profile-note-container");
this.addModal = $("#user-profile-entry-note-modal");
this.infoViewModel = new InfoViewModel(this);
this.refresh().then(function () { return _this.isInitialized = true; });
}
};
UserProfileNotesViewModel.prototype.refresh = function () {
var _this = this;
kendo.ui.progress(this.container, true);
return $.ajax({
url: Ccf.Utility.serviceUrl + "User/GetUserNotes/" + this.options.userId,
method: "POST",
contentType: "application/json; charset=UTF-8",
dataType: "json"
})
.done(function (data, textStatus, jqXHR) {
_this.infoViewModel.set("data", data);
})
.fail(function (data, textStatus, errorThrown) {
_this.infoViewModel.set("messages", Ccf.Utility.getAjaxMessages(data));
})
.always(function (data, textStatus, errorThrown) {
kendo.ui.progress(_this.container, false);
if (!_this.isInitialized) {
kendo.bind(_this.container, _this.infoViewModel);
}
});
};
return UserProfileNotesViewModel;
}());
User.UserProfileNotesViewModel = UserProfileNotesViewModel;
})(User = ViewModels.User || (ViewModels.User = {}));
})(ViewModels = Ccf.ViewModels || (Ccf.ViewModels = {}));
})(Ccf || (Ccf = {}));
The HTML that that binds to the viewmodel:
<div id="user-profile-note-entry-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" data-bind="invisible: data.id">Add Child</h4>
<h4 class="modal-title" data-bind="visible: data.id">Update Child</h4>
</div>
<div class="modal-body">
@Html.Partial("_MessageListPartial")
<div class="form-group">
<label for="txtName">Name</label>
<input id="txtName" class="form-control" placeholder="" data-bind="value: data.name" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bind="click: save">Save</button>
</div>
</div>
</div>
</div>
<div class="user-profile-note-container">
<div id="note-container" style="position: relative;">
<div class="portlet">
<div class="portlet-heading bg-primary">
<div class="portlet-widgets pull-left p-0">
<a data-toggle="collapse" data-parent="#notes" href="#notes-settings">
<i class="ion-minus-round pull-left m-t-10"></i>
<span class="divider"></span>
<span class="m-l-10 p-t-10">Associated Notes</span>
</a>
</div>
<div class="portlet-title pull-right">
<button type="button" class="btn btn-default waves-effect w-sm waves-light" data-bind="click: add">Add Note</button>
<span class="divider"></span>
<i class="ion-help-circled help-text-icon" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="o These are notes that can only be viewed by administrators and coordinators. Use this area to add information about a user." data-original-title="Associated Notes" aria-describedby="popover383606"></i>
</div>
<div class="clearfix"></div>
</div>
<div id="notes-settings" class="panel-collapse collapse in">
<div class="portlet-body" style="" data-bind="visible: messages.length <= 0">
<div id="bg-primary" class="panel-collapse collapse in">
<div class="portlet-body">
@foreach (User_Notes note in ViewBag.UserNotes)
{
<div class="list-group-item">
<div class="row">
<div class="=conversation-text">
<div class="ctext-wrap">
<div>
@note.NoteMessage
</div>
<small class="text-muted">by @note.EnteredByUserName - Entered at: @note.DateEntered </small>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The page itself has several viewmodels being initialized and this is the only one that is having issues. The others are working fine with the same code structure and function calls. Here is where the viewmodels are being initialized:
var Ccf;
(function (Ccf) {
var ViewModels;
(function (ViewModels) {
var User;
(function (User) {
var UserProfileViewModel = (function () {
function UserProfileViewModel(options) {
this.options = options;
this.infoViewModel = new User.UserProfileInfoViewModel(options);
this.childrenViewModel = new User.UserProfileChildrenViewModel(options);
this.diagnosisViewModel = new User.UserProfileDiagnosesViewModel(options);
this.labelViewModel = new User.UserProfileLabelsViewModel(options);
this.languageViewModel = new User.UserProfileLanguagesViewModel(options);
this.referralSourceViewModel = new User.UserProfileReferralSourceViewModel(options);
this.settingsViewModel = new User.UserSettingsViewModel(options);
this.notesViewModel = new User.UserProfileNotesViewModel(options);
}
UserProfileViewModel.prototype.initialize = function () {
this.infoViewModel.initialize();
this.childrenViewModel.initialize();
this.diagnosisViewModel.initialize();
this.labelViewModel.initialize();
this.languageViewModel.initialize();
this.referralSourceViewModel.initialize();
this.settingsViewModel.initialize();
this.notesViewModel.initialize();
};
return UserProfileViewModel;
}());
User.UserProfileViewModel = UserProfileViewModel;
})(User = ViewModels.User || (ViewModels.User = {}));
})(ViewModels = Ccf.ViewModels || (Ccf.ViewModels = {}));
})(Ccf || (Ccf = {}));The user profile view model gets initialized directly on the view with the .Net razor passing the user Id value:
$(function () {
var vm = new Ccf.ViewModels.User.UserProfileViewModel({ userId: "@ViewBag.UserId", isCoordinator: @isCoordinator.ToString().ToLower() });
vm.initialize();
});
Hi Eric,
Could you, please, prepare and send us a small isolated runnable sample demonstrating the issue in question? If that is feasible, you would prepare that sample in our Dojo runner. This way I will be able to review and troubleshoot the case locally and provide you with further assistance.