Commit 25d83dd6

mo khan <mo@mokhan.ca>
2014-07-19 15:32:33
re render view on error and model changes.
1 parent f33d519
Changed files (2)
app
assets
javascripts
backbone
templates
tutorials
views
app/assets/javascripts/backbone/templates/tutorials/new.jst.ejs
@@ -10,7 +10,7 @@
         <div class="control-group">
           <label class="control-label" for="tutorial_url">Tutorial URL</label>
           <div class="controls">
-            <input class="input-xxlarge" id="tutorial_url" name="url" type="text" value="<%= tutorial.url %>" placeholder="http://www.cakeside.com/">
+            <input class="input-xxlarge" id="tutorial_url" name="url" type="text" value="<%= url %>" placeholder="http://www.cakeside.com/" autofocus>
           </div>
         </div>
         <div class="control-group">
@@ -23,20 +23,18 @@
             </div>
         </div>
         <div class="form-actions">
-          <button id='save-button' type="submit" class="btn btn-primary" <% if (isInvalid()) { %> disabled=disabled <% } %>>Save</button>
+          <button id='save-button' type="submit" class="btn btn-primary">Save</button>
           <a href="#tutorials" class="btn">Cancel</a>
         </div>
       </fieldset>
     </form>
-    <% if(canLoadPreview()) { %>
-    <div class="thumbnail">
-      <img class="embed-thumb" src="<%= tutorial.image_url %>" />
+    <div id="preview-panel" class="thumbnail">
+      <img class="embed-thumb" src="<%= image_url %>" />
       <div class="caption">
-        <h3 class="tutorial-heading"><%= tutorial.heading %></h3>
+        <h3 class="tutorial-heading"><%= heading %></h3>
         <p id="tag-list"></p>
-        <p class="tutorial-description"><%= tutorial.description %></p>
+        <p class="tutorial-description"><%= description %></p>
       </div>
     </div>
-    <% } %>
   </div>
 </div>
app/assets/javascripts/backbone/views/tutorials/new_view.js.coffee
@@ -4,6 +4,11 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
   ui:
     url: '#tutorial_url'
     save_button: '#save-button'
+    preview: '#preview-panel'
+
+  modelEvents:
+    'invalid': 'displayError'
+    'change': 'render'
 
   events:
     'change #tutorial_url': 'loadUrl'
@@ -30,7 +35,7 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
     @model.set('image_url', data.thumbnail_url)
     @model.set('author', data.provider_name)
     @model.set('author_url', data.provider_url)
-    @render()
+    @model.isValid()
 
   resetTutorial: (url) ->
     @model.set('url', url)
@@ -39,10 +44,14 @@ class CakeSide.Views.Tutorials.NewView extends Marionette.ItemView
     @model.set('image_url', '')
     @model.set('author', '')
     @model.set('author_url', '')
-    @render()
+    @model.isValid()
+
+  onRender: ->
+    @model.isValid()
+
+  disableSaveButton: ->
+    @ui.save_button.attr('disabled', 'disabled')
 
-  serializeData: ->
-    {
-      tutorial: @model.toJSON(),
-      isValid: @model.isValid()
-    }
+  displayError: (model, error) ->
+    @disableSaveButton()
+    @ui.preview.hide()