Browse files

Code format, Fix update model

  • Loading branch information...
1 parent f4b4177 commit b1f6f7800f5188bcc4591eba4ac4c55e150f6cfe @hugomallet hugomallet committed Mar 13, 2013
Showing with 111 additions and 106 deletions.
  1. +67 −63 app/index.html
  2. +1 −1 app/scripts/models/article-model.js
  3. +43 −42 app/scripts/views/article-view.js
View
130 app/index.html
@@ -3,78 +3,82 @@
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Gravity Blog</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width">
- <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>Gravity Blog</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width">
+ <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
- <link rel="stylesheet" href="styles/bootstrap.css"/>
- <link rel="stylesheet" href="styles/main.css"/>
-
- <script src="components/modernizr/modernizr.js"></script>
- </head>
- <body>
- <!--[if lt IE 7]>
- <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
- <![endif]-->
+ <!-- build:css styles/styles.css -->
+ <link rel="stylesheet" href="styles/bootstrap.css"/>
+ <link rel="stylesheet" href="styles/main.css"/>
+ <!-- endbuild -->
+
+ <!-- build:js scripts/vendor/modernizr.js -->
+ <script src="components/modernizr/modernizr.js"></script>
+ <!-- endbuild -->
+ </head>
+ <body>
+ <!--[if lt IE 7]>
+ <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
+ <![endif]-->
- <div id="container">
+ <div id="container">
- <div id="header">
+ <div id="header">
- <header>
- <h1 class="Three-Dee">Gravity Blog</h1>
- <div id="createTool" class="tools" >
- <input id="new-title" type="text" placeholder="title"/>
- <textarea id="new-content" rows="3" type="text" placeholder="content"></textarea>
- <button id="new-article"class="btn" type="button">Submit</button>
- </div>
- <button class="btn" id="add-article" type="button"><i class="icon-plus-sign"></i></button>
- </header>
+ <header>
+ <h1 class="Three-Dee">Gravity Blog</h1>
+ <div id="createTool" class="tools" >
+ <input id="new-title" type="text" placeholder="title"/>
+ <textarea id="new-content" rows="3" type="text" placeholder="content"></textarea>
+ <button id="new-article"class="btn" type="button">Submit</button>
+ </div>
+ <button class="btn" id="add-article" type="button"><i class="icon-plus-sign"></i></button>
+ </header>
- </div>
+ </div>
- <div id="blog">
- </div>
+ <div id="blog">
+ </div>
- </div>
+ </div>
- <!-- Template -->
- <script type="text/template" id="article-template">
-
- <label><%- title %></label>
- <p><%- content %></p>
- <div class="tools edit">
- <input class="edit-title" type="text" value="<%- title %>" />
- <textarea class="edit-content" rows="3" type="text" ><%- content %></textarea>
- <button class="btn edit-article" type="button">modify</button>
- </div>
+ <!-- Template -->
+ <script type="text/template" id="article-template">
+
+ <label><%- title %></label>
+ <p><%- content %></p>
+ <div class="tools edit">
+ <input class="edit-title" type="text" value="<%- title %>" />
+ <textarea class="edit-content" rows="3" type="text" ><%- content %></textarea>
+ <button class="btn edit-article" type="button">modify</button>
+ </div>
- </script>
+ </script>
- <!-- build:js scripts/scripts.js -->
- <script src="components/jquery/jquery.min.js"></script>
- <script src="components/underscore/underscore-min.js"></script>
- <script src="components/backbone/backbone-min.js"></script>
- <script src="scripts/main.js"></script>
- <script src="scripts/views/application-view.js"></script>
- <script src="scripts/models/application-model.js"></script>
- <script src="scripts/collections/application-collection.js"></script>
- <script src="scripts/views/article-view.js"></script>
- <script src="scripts/models/article-model.js"></script>
- <script src="scripts/collections/article-collection.js"></script>
- <script src="scripts/routes/application-router.js"></script>
- <!-- endbuild -->
+ <!-- build:js scripts/scripts.js -->
+ <script src="components/jquery/jquery.min.js"></script>
+ <script src="components/underscore/underscore-min.js"></script>
+ <script src="components/backbone/backbone-min.js"></script>
+ <script src="scripts/main.js"></script>
+ <script src="scripts/views/application-view.js"></script>
+ <script src="scripts/models/application-model.js"></script>
+ <script src="scripts/collections/application-collection.js"></script>
+ <script src="scripts/views/article-view.js"></script>
+ <script src="scripts/models/article-model.js"></script>
+ <script src="scripts/collections/article-collection.js"></script>
+ <script src="scripts/routes/application-router.js"></script>
+ <!-- endbuild -->
- <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
- <script>
- var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
- (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
- g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g,s)}(document,'script'));
- </script>
- </body>
+ <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+ <script>
+ var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
+ (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+ g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g,s)}(document,'script'));
+ </script>
+ </body>
</html>
View
2 app/scripts/models/article-model.js
@@ -7,7 +7,7 @@ gravityBlog.Models.ArticleModel = Backbone.Model.extend({
},
initialize: function() {
- console.log('New article: ', this);
+ console.log('New article: ', this);
}
});
View
85 app/scripts/views/article-view.js
@@ -1,51 +1,52 @@
+'use strict';
gravityBlog.Views.articleView = Backbone.View.extend({
+ tagName: 'article',
- tagName: "div",
+ className: 'article-view',
- className: "article-view",
+ template: _.template($('#article-template').html()),
- template: _.template($('#article-template').html()),
-
- events: {
- "dblclick p,label" : "showEditTools",
- "click .edit-article" : "save"
- },
+ events: {
+ 'dblclick p,label': 'showEditTools',
+ 'click .edit-article': 'save'
+ },
initialize: function() {
- this.render();
- },
-
- render: function() {
- this.$el.html(this.template(this.model.toJSON()));
- return this;
- },
-
- save : function(event){
-
- var input_val = this.$el.find(".edit-title").val();
- var textarea_val= this.$el.find(".edit-content").val();
-
- if(input_val!="" && textarea_val!=""){
- this.model.set("title", input_val);
- this.model.set("content", textarea_val);
- this.hideEditTools();
- this.render();
- }
- },
-
- showEditTools : function(){
-
- this.$el.find('label').hide()
- this.$el.find('p').hide();
- this.$el.find('.tools').show()
- },
-
- hideEditTools : function(){
-
- this.$el.find('label').show()
- this.$el.find('p').show();
- this.$el.find('.tools').hide()
- }
+ this.render();
+ },
+
+ render: function() {
+ this.$el.html(this.template(this.model.toJSON()));
+ return this;
+ },
+
+ save: function() {
+
+ var inputVal = this.$el.find('.edit-title').val();
+ var textareaVal= this.$el.find('.edit-content').val();
+
+ if (inputVal !== '' && textareaVal !== '') {
+ this.model.set({
+ 'title': inputVal,
+ 'content': textareaVal
+ });
+ this.model.save();
+ this.hideEditTools();
+ this.render();
+ }
+ },
+
+ showEditTools: function() {
+ this.$el.find('label').hide();
+ this.$el.find('p').hide();
+ this.$el.find('.tools').show();
+ },
+
+ hideEditTools: function() {
+ this.$el.find('label').show();
+ this.$el.find('p').show();
+ this.$el.find('.tools').hide();
+ }
});

0 comments on commit b1f6f78

Please sign in to comment.