0

backbone.js の学習の初期段階 (Js の事実でさえも)。HTML ページには 3 つの画像があります。クリック時に最初の画像を置き換えたい。私はこれを学習プロセスとしてやっています。コードまたはロジックの何が問題なのか教えてください。

<!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>
4

1 に答える 1

1

改善できることはたくさんありますが、次のことを試して、あなたが持っている onClick を削除してください。

<!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>

明らかに、これはあなたがやりたい方法ではありませんが、試してみる価値があるかもしれません. 私が見つけた素晴らしいバックボーン チュートリアル シリーズは、Wine Cellar Tutorialでした。シリーズ全体をフォローすると、多くのことを学ぶことができます。教訓の記事でそれをフォローアップして楽しんでください:)

于 2013-01-22T09:13:35.457 に答える