William Blogs & More

AboutServicesGitbookBootcampBlogs

canada flag
  • Blogs (9)
    • README

    • đŸ“± 236 - 992 - 3846

      📧 jxjwilliam@gmail.com

    • Version: ‍🚀 1.1.0

    • Backbone.js: 2 ways to import default scripts

    Blogs20142014-04-21

    1. Backbone default scripts template

    Here I list a general way to import Backbone.js default scripts when initialize the home page. It uses CDN, clean and convenient. Create a ’index.tpl.html’ file:

    <!DOCTYPE html>
<html>
<head>
    <title>Backbone Template to start</title>
    <link rel="stylesheet"  href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css" />
</head>
<body>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
    $(function() {
        Backbone.history.start();
    });
</script>
</body>
</html>

    Save it as a template file ready for use. Every time to start, clone it as a ‘index.html’. After loading the cloned ‘index.html’ page, we can directly write testing codes in browser’s console. very convenient.

    2. Use Bower to localize scripts

    Bower is the Client Side Dependencies Management tools, just like ‘npm’ in server-side. By using bower and ’bower.json’, we can generate and localize the default Backbone packages.

    1. Customize a ’bower.json’ file:

      {
    "name": "backbone-template-to-start",
    "version": "0.0.0",
    "dependencies": {
        "backbone": "~1.1.1",
        "underscore": "~1.6.0",
        "jquery": "~2.0.3",
        "bootstrap": "~3.0.0"
    }
}
    2. With this ’bower.json’, anytime running:
      $ bower install
      The dependency packages will be installed in ‘bower_components/’ folder of current directory.
    3. Add these ‘.js’ files into the index.html, that’s it.