Routing and button click not working in Backbone + handlebars

StackOverflow https://stackoverflow.com/questions/23534249

سؤال

index.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="js/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="js/lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
        <link href="js/lib/ratchet/ratchet-theme-ios.css" rel="stylesheet">
        <link href="js/lib/ratchet/ratchet.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>totter</title>
    </head>
    <body>
        <div class="content">
        </div>
        <script src="js/lib/jquery-1.9.1.min.js"></script>
        <script src="js/lib/underscore-min.js"></script>
        <script src="js/lib/backbone-min.js"></script>
        <script src="js/lib/bootstrap/js/bootstrap.js"></script>
        <script src="js/lib/handlebars/handlebars-v1.3.0.js"></script>
        <script src="js/lib/ratchet/ratchet.js"></script>
        <script src="js/common/helper.js"></script>
        <script src="js/app.js"></script>
        <script src="js/views/home.js"></script>
        <script src="js/views/signin.js"></script>
        <script src="js/models/home.js"></script>
        <script src="js/models/signin.js"></script>
    </body>
</html>

app.js

var app = {
    views: {},
    models: {},
    loadTemplates: function(views, callback) {

        var deferreds = [];

        $.each(views, function(index, view) {
               if (app[view]) {
                   deferreds.push($.get('template/' + view + '.hbs', function(data) {
                            app[view].prototype.template = _.template(data);
                            }, 'html'));
               } else {
                   alert(view + " not found");
               }
        });

        $.when.apply(null, deferreds).done(callback);
    }
};


app.Router = Backbone.Router.extend({

    routes: {
      "": "home",
     "signIn":"SignIn"
    },

    home: function () {
    // Since the home view never changes, we instantiate it and render it only once
      if (!app.home) {
          app.home = new app.HomeView();
          app.home.render();
      } else {
        // delegate events when the view is recycled
          app.home.delegateEvents();
      }
    },
    SignIn:function(){
        if (!app.signin) {
            app.signin = new app.SignInView();
            app.signIn.render();
        } else {
        // delegate events when the view is recycled
            app.signin.delegateEvents();
        }
    }
});


$(document).on("ready", function () {
        app.loadTemplates(["HomeView"],
        function () {
            app.router = new app.Router();
            Backbone.history.start();
    });
});

home.js

app.HomeView = Backbone.View.extend({
        //Calling the render method to render view from the template
        initialize:function(){
            this.render();
        },

        //Pass the handlebars template for complilation and
        render: function () {
            var path = './template/HomeView.hbs';
            Helper.GET_TEMPLATE(path, function(template) {

            //pass collection to template to set values
            var html = template(app.homeCollection.toJSON());

            //pass collection to template to set values
            $('.content').html(html);
        });

        $('.signin').bind('click', function(e) {
                           app.Router.navigate("signIn", {trigger: true});
                           });
        }

});

app.home = new app.HomeView();

sigin.js

app.SigInView = Backbone.View.extend({
        //Calling the render method to render view from the template
        initialize:function(){
            this.render();
        },

        //Pass the handlebars template for complilation and
        render: function () {
            var path = './template/SignInView.hbs';
            Helper.GET_TEMPLATE(path, function(template) {

            //pass collection to template to set values
            var html = template(app.signinCollection.toJSON());

            //pass collection to template to set values
            $('.content').html(html);
        });



        }

});

app.signin = new app.SigInView();

helper.js

var Helper = {};

Helper.GET_TEMPLATE = function(path,callback){
    var source, template;
    $.ajax({
        url: path,
        success: function(data) {
            source    = data;

            //Compile the raw data we got from the file
            template  = Handlebars.compile(source);

            //execute the callback if passed
            if (callback){
                callback(template);
            }
        }
    });

}

homeModel.js

var HomeModel = Backbone.Model.extend();

var homeData = new HomeModel({
    id: 1,
    signUpTitle: 'Sign Up for TOT ',
    signInTitle: 'Sign In',
    slogan:'slogan slogan slogan slogan slogan slogan slogan slogan slogan slogan '
});

/**
* Defining a Collection to set model
*/
var HomeCollection = Backbone.Collection.extend({

    model: HomeModel

});

/**
 * Defining a array to hold the collection
 */

app.homeCollection = new HomeCollection([homeData]);

HomeView.hbs

<header class="bar bar-nav">
    <h1 class="title">totter</h1>
</header>
<div class="logo">
    <img src = "img/choice.png">
        </div>

{{#each []}}
<div class="textcontent">
    <label>{{this.slogan}}</label>
</div>
<div class="footer">
    <button class="btn btn-primary btn-block signup" style="">{{this.signUpTitle}}</button>
</div>
<div class="footer">
    <button class="btn btn-primary btn-block signin">{{this.signInTitle}}</button>
</div>
{{/each}}

In the above code I used to develop a simple app with 2 views. I want to show sign-in view on button click of sign-in.

How can I achive this? I am using "handlebars" and "backbone.js".

هل كانت مفيدة؟

المحلول

The events aren't firing because you're utilizing the View el property. Either give it a preexisting element or insert the el itself to the DOM.

see the answer on the following discussion for a more comprehensive explanation.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top