CODEWITHSUNDEEP
javascriptbackbone.js
Arjun
Arjun

Reputation: 1279

Replacing Image with Backbone.js

Initial stages of learning backbone.js (even Js infact). The html page has 3 images. I want to replace the first image on clicking. I'm doing this as a learning process. Please tell me what is wrong with the code or my logic.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
   <title>Hello World in Backbone.js</title>
</head>
<body>

  <!-- HTML CODE -->

        <div align="center">
            <img src="pic1.jpg" id = "pic1" />
            <img src="pic2.jpg" id = "pic2" />
            <img src="pic3.jpg" id = "pic3" />
        </div>

  <!-- Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  

  <!-- Javascript code -->
  <script type="text/javascript">
        var AppView = Backbone.View.extend({
            el: 'body',
            initialize: function(){
                this.render();
            },

            events: function(){
                "click #pic1": "replacePic1"
            },

            render: function(){
                console.log('view rendered. try clicking pic1');
                //this.$el.html(this.template({who: 'world!'}));
            },

            replacePic1: function(){
                alert("You can replace Pic1");
            }
        });

        var appView = new AppView();

  </script>

</body>
</html>

Upvotes: 0

Views: 1333

Answers (1)

Xerri
Xerri

Reputation: 5046

There is a lot you can improve but just to get things going try the following and remove the onClick that you have.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Hello World in Backbone.js</title>
</head>
<body>

    <!-- HTML CODE -->
    <div align="center">
        <img src="pic1.jpg" id = "pic1"/>
        <img src="pic2.jpg" id = "pic2" />
        <img src="pic3.jpg" id = "pic3" />
    </div>

    <!-- Libraries -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  

    <!-- Javascript code -->
    <script type="text/javascript">
        var AppView = Backbone.View.extend({
            el: 'body',
            initialize: function(){
                this.render();
            },

            events: {
                "click #pic1": "replacePic1"
            },

            render: function(){
                console.log('view rendered. try clicking pic1');
                //this.$el.html(this.template({who: 'world!'}));
            },

            replacePic1: function(){
                $("#pic1").attr('src',"new/url.jpg");
            }
        });

        var appView = new AppView();
    </script>

</body>
</html>

Obviously this is not the way you want to go about things but might be worth trying out. A great backbone tutorial series I had found was a Wine Cellar Tutorial. Follow the whole series and you will learn a lot. Follow it up with the Lessons Learned article and enjoy :)

Upvotes: 1

Related Questions