Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Made some tweaks

  • Loading branch information...
commit bb69b14f6d4719848a9d6a7410fedc0eb32912d6 1 parent 2e7785c
@brenelz authored
Showing with 55 additions and 33 deletions.
  1. +55 −33 index.html
View
88 index.html
@@ -12,34 +12,25 @@
<body>
<h1>Backbone for Twitter</h1>
- <form id="new-tweet">
- <label>Author:</label><input id="author-name" name="author-name" type="text" />
- <label>Status:</label><input id="status-update" name="status-update" type="text" />
- <button>Post</button>
- </form>
- <hr />
- <div id="tweets-container"></div>
+ <div id="app"></div>
- <script src="/underscore.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
- <script src="/backbone.js"></script>
+ <script src="underscore.js"></script>

the reason why I have the forward slash there is to always find scripts relative to the root directory of the server. This makes it much easier when you break things into views on the server (using Jade or EJS usually). But it is not required in this example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+ <script src="backbone.js"></script>
<script>
(function($) {
var Tweet = Backbone.Model.extend({
- defaults: function() {
- return {
- author: '',
- status: ''
- }
+ defaults: {
+ author: '',
+ status: ''
}
});
+
var TweetsList = Backbone.Collection.extend({
model: Tweet
});
- var tweets = new TweetsList();
var TweetView = Backbone.View.extend({
- model: new Tweet(),

why did you decide to remove that?

@brenelz Owner
brenelz added a note

Not 100% sure why i removed the "model: new Tweet". I guess that prevents it from erroring out if you forget to assign new TweetView() a model?

I just think you would never have a TweetView that has an empty model.

yeah that was the idea, so you don't always have to assign it a model. If you forget to it is fine. Then inside of that view you are guaranteed that it won't throw stupid errors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
tagName: 'div',
events: {
'click .edit': 'edit',
@@ -68,7 +59,8 @@
},
delete: function(ev) {
ev.preventDefault();
- tweets.remove(this.model);
+ this.model.destroy();

I like this and the line below. The only thing is that we don't yet have a destroy event on the server.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ this.remove();
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
@@ -77,43 +69,73 @@
});
var TweetsView = Backbone.View.extend({
- model: tweets,
- el: $('#tweets-container'),
+ tagName:'div',
+ id: 'tweets-container',

There is no id attribute for Backbone views. There is one for Models, but that is the ID of the model on the server.

@brenelz Owner
brenelz added a note

this id is the css id, I added this purely because that is how you had the id set in the markup. Then we could use this id to style in CSS perhaps. Same concept as adding a className which gives that div a class.

yeah but it is confusing. And I just checked in the backbone docs, and there is no view.id. So you are just creating a new property on the object called id. Which is fine, but the id usually refers to something like a database id in MVC.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
initialize: function() {
- this.model.on('add', this.render, this);
- this.model.on('remove', this.render, this);
+ this.collection = new TweetsList();
+ this.collection.on('add', this.render, this);
},
render: function() {
var self = this;
self.$el.html('');
- _.each(this.model.toArray(), function(tweet, i) {
- self.$el.append((new TweetView({model: tweet})).render().$el);
+
+ _.each(this.collection.models, function(tweet) {
+ var tweetView = new TweetView({model: tweet});
+ self.$el.append(tweetView.render().el);
});
return this;
}
});
+ var AppView = Backbone.View.extend({

Very good, I like this. Keeps things nice and clean.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ el: $('#app'),
+ events: {
+ 'submit #new-tweet': 'addTweet'
+ },
+ initialize: function() {
+ this.tweetsView = new TweetsView();
+ this.template = _.template($('#form-template').html());
+ this.render();
+ },
+ addTweet: function(ev) {
+ ev.preventDefault();
+ var tweet = new Tweet({
+ author: $('#author-name').val(),
+ status: $('#status-update').val()
+ });
+ this.tweetsView.collection.add(tweet);
+ },
+ render: function() {
+ this.$el.html(this.template());
+ this.$el.append(this.tweetsView.render().el);
+ return this;
+ }
+ });
+
$(document).ready(function() {
- $('#new-tweet').submit(function(ev) {
- var tweet = new Tweet({ author: $('#author-name').val(), status: $('#status-update').val() });
- tweets.add(tweet);
- console.log(tweets.toJSON());
-
- return false;
- });
-
- var appView = new TweetsView();
+ var appView = new AppView();
});
})(jQuery);
</script>
<!-- Templates -->
+ <script type="text/template" id="form-template">

This does not need to be in a template. Templates are great for dynamically generating content and doing string interpolation, but not for static content. You should just inline the template into the destination container ('#app') and not bother rendering it. You gain nothing by creating the template for this and actually decrease performance (it needs to be rendered by JS).

@brenelz Owner
brenelz added a note

yeah wasn't sure what the best way for this was. I wanted to see if I could have the

completely empty.

I was also thinking if I wanted to do something dynamic with this template I could add the number of tweets listed. Eg. Number of Tweets: 5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ <form id="new-tweet">
+ <label>Author:</label><input id="author-name" name="author-name" type="text" />
+ <label>Status:</label><input id="status-update" name="status-update" type="text" />
+ <button>Post</button>
+ </form>
+ <hr />
+ </script>
+
<script type="text/template" id="tweet-template">
<span class="author"><%= author %>:</span>
<span class="status"><%= status %></span>
<a href="#" class="edit">[edit]</a>
<a href="#" class="delete">[delete]</a>
</script>
+
+
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.