Backbone js set9/11/2023 The final line above allows you to use your browser's back button to move between different states of your app, even if you never leave the page.Īnd that's it - at least for a quick introduction. if you are logged in), with your Backbone code. This is now a clean way to handle users, including a current_user (e.g. The final core component to Backbone.js apps that we'll quickly introduce here is a router: Again, it will all make more sense once you start building the app for yourself here soon. Your head is probably exploding at this point, but this really is the meat of Backbone.js, so nice job getting this far. This is what the events method of the view handles for us. It could have an avatar image that, when clicked, showed a larger version. JavaScript Template) would be our Eco template of this element. In this case, this would be the HTML element that displays an individual user. In this example, we've setup a view that will, upon being instantiated and rendered, be ready to be added to the DOM for a visitor to see. avatar ': ' showLargeAvatarImage ' render: -> Let's say we want to store a collection of users in browser memory and then do things like add, remove, fetch, sync with our back-end server, display them in the browser, etc… This is exactly what Backbone collections are useful for:Ĭlass extends Backbone.View We can (and will) do a lot more here later with the user model (such as adding authentication and validation methods). The paramRoot method tells Backbone to wrap all the user's attributes into a ‘user' object when sending data (this is convenient when handling the params on the Rails end of things, which you'll see). The url method, for example, tells Backbone where to sync up our model with our back-end (Rails) model (more on this later). Don't worry if you are not picking all this up - but it's important to try to get the basic concepts before we start writing our app later in this tutorial series (at that point this will become much clearer).īackbone.Model is a backbone.js class that has a bunch of its own convenient methods to use, and we can also define our own or override the defaults. Ok, now we are seriously getting into it (‘told you we'd go quick). something.js.coffee - which, remember, gets transcompiled into pure JavaScript for browsers to read):Ĭlass extends Backbone.Model When your website is loaded, we'll have something like this in an included CoffeeScript (i.e. The Backbone of Backbone.jsīecause it's crazy easy to get lost, at first, when browsing the Backbone.js documentation or Backbone.js tutorials online (most of which expect you to be a software genius of some sort), we'll boil down the different parts for you here and then walk you through building your own app step-by-step later in these tutorials. While these are certainly suitable candidates for us to use throughout the rest of these tutorials, you'll also want to look into the templating tool React.js (had I written this tutorial more recently, I likely would have chosen React and followed this basic line of integration). While this is cool because it's flexible, it makes it difficult for beginners to learn because there are an infinite number of ways to set things up (and thus Googling for help can often land you in someone else's Backbone.js paradigm).īecause of this, we have deliberately chosen to use (and standardize our conventions with) Backbone-on-Rails, CoffeeScript, and Embedded CoffeeScript (Eco) templates. Second, Backbone.js does not care what back-end language or front-end template system (more on this below) you are using, it only needs to work with JSON and the standard front-end languages. Helpful classes and methods have already been built for you that you can extend to suit your needs. If you want to, you can do all the magic yourself (as many developers do) with tools like jQuery and your own object architectures, observers, AJAX calls, etc., but there are serious advantages to using Backbone.js (or other frameworks like Angular.js, Ember.js, Meteor.js, Sails.js, etc…) because - quite frankly - for most apps there is no reason to reinvent the wheel. ![]() Overview of Backbone.jsįirst of all, Backbone.js is meant to help you organize your JavaScript and the manipulation of browser stuff such as the elements in your Document Object Model (DOM) (e.g. This post jumps immediately into tying together the multiple markup and scripting languages that we've introduced thus far, so make sure you've at least scanned the previous posts and let's get going. ![]() As we wrap up the “quick introductions” part of our Introduction to web and mobile development series, here I'll be presenting Backbone.js - a JavaScript framework that plays nicely with jQuery and Ruby on Rails.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |