Databases
StackOverflow2013
Postsdbo
POHot Towel SPA Modal Dialog knockout bindings and validation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHot Towel SPA Modal Dialog knockout bindings and validation
    text
    copied!<p>I'm building a SPA using the Hot Towel SPA template.<br/> Here's my problem:<br/> I have a view where I put the information related to a Venue (Name, Description, Address, etc.) Associated with the Venue there are different Rooms with their own fields (Name, Description, Type, etc.) I have a list of Rooms and a button "Add New Room".<br/>When I hit the button, a modal dialog pops up, I fill the form with the requested information then I save. After the dialog is closed the list gets updated. I am able to retrieve the information from the dialog, but I'm not able to trigger the validation rules if the fields are left blank.<br/> Also the <strong>datacontext.HasChanges()</strong> returns always true. Is it possible to use the modal dialog like any other view?<br/> Here's part of the code I am using:<br/> From <strong>Model.cs</strong>:<br/></p> <pre><code>public class Venue { [Key] public int VenueId { get; set; } [Required(ErrorMessage = "Venue Name is required.")] [Display(Name = "Venue Name")] public string Name { get; set; } public string Description { get; set; } public virtual ICollection&lt;Room&gt; Fields { get; set; } ... } public class Room { [Key] public int RoomId { get; set; } [Required(ErrorMessage = "Name is required.")] [Display(Name = "Name")] public string Name { get; set; } public string Description { get; set; } public string Notes { get; set; } public int VenueId { get; set; } public virtual Venue Venue { get; set; } ... } </code></pre> <p>From <strong>venuedetail.js</strong>:</p> <pre><code>define(['services/datacontext', 'services/model', 'durandal/plugins/router', 'durandal/system', 'durandal/app', 'services/logger', 'viewmodels/roommodal'], function (datacontext, model, router, system, app, logger, roommodal) { ... var addRoom = function () { var newRoom= datacontext.manager.createEntity("Room"); roommodal.room = newRoom; app.showModal(roommodal).then(function (response) { if (response) { } return true; }); }; ... </code></pre> <p>From roommodal.js:</p> <pre><code>define(['durandal/app', 'services/datacontext', 'durandal/system', 'durandal/plugins/router', 'services/logger'], function (app, datacontext, system, router, logger) { var isSaving = ko.observable(false); var room= ko.observable(); activate = function(routeData) { return true; }; hasChanges = ko.computed(function() { return datacontext.hasChanges(); // Always true ? }); canSave = ko.computed(function() { return hasChanges() &amp;&amp; !isSaving(); }); canDeactivate = function () { return true; }; var save = function(dialogResult) { this.modal.close(dialogResult); }; var cancel = function() { this.modal.close(false); }; var vm = { activate: activate, save: save, canSave: canSave, cancel: cancel, canDeactivate: canDeactivate, room: room, hasChanges: hasChanges, title: 'Add room' }; return vm; </code></pre> <p>From <strong>roommodal.html</strong>: <code></p> <pre><code>&lt;div class="messageBox"&gt; &lt;div class="modal-header"&gt; &lt;h3 data-bind="text: title"&gt;&lt;/h3&gt; &lt;i class="icon-asterisk" data-bind="visible: hasChanges"&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;div data-bind="with: room"&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input id="name" data-bind="value: name, valueUpdate: 'afterkeydown'" placeholder="Enter name" /&gt; &lt;div&gt; &lt;label&gt;Description&lt;/label&gt; &lt;textarea data-bind="value: description" placeholder="Enter description"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;div&gt; &lt;label&gt;Notes&lt;/label&gt; &lt;textarea data-bind="value: notes" placeholder="Enter notes"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn btn-info" data-bind="click: cancel, enable: canSave"&gt; &lt;i class="icon-undo"&gt;&lt;/i&gt;Cancel&lt;/button&gt; &lt;button class="btn btn-info" data-bind="click: save, enable: canSave"&gt; &lt;i class="icon-save"&gt;&lt;/i&gt;Save&lt;/button&gt; &lt;/div&gt; </code></pre> <p></p> <p></code> Any help will be greatly appreciated. Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload