Geek Answers Handbook

Access to click event outside el in spine mode

How can I access a click event outside the scope el.

What I have: HTML:

<div class="right_btn"></div>
<div id="template_loader">
    <!-- HTML template goes here which contain form inputs-->
    <input type="text" class="forgot_password_email" name="forgot_password_email"/>
</div>

View:

var ForgotPasswordView = Backbone.View.extend({
    el: "#template_loader",
    initialize: function () {
        console.log('Forgot Password View Initialized');
    },
    render: function () {
        blockPage();
        var that = this;  

        $.get(App.baseUrl + 'templates/forgot-password-view.html', function (data) {
            template = _.template(data, { });
            that.$el.html(template);
            unblockPage();
        }, 'html'); 
    },
    events:{
        'click .right_btn':'forgotPasswordSubmit', //Doesn't fire as its outside of el
    }, 
    forgotPasswordSubmit: function(e){
        alert($(".forgot_password_email").val());
        e.preventDefault();
    }
});

I went through the following:

Backbone.js views - binding events to an element outside of "el"

How to bind a click event in a subordinate Backbone object

but really doesn't help me get it to work.

How can I get a click event .right_btninside a view. I cannot change the structure of the template to include right_btninside el. In any case, to bind an external element or recognize a click event inside the base view itself.

+4
3

:

, template_loader, - . right_btn , .

var ForgotPasswordView = Backbone.View.extend({
    el: "#template_loader",
    initialize: function () {
        console.log('Forgot Password View Initialized');
    },
    render: function () {
        blockPage();
        var that = this;  

        $.get(App.baseUrl + 'templates/forgot-password-view.html', function (data) {
            template = _.template(data, { });
            that.$el.html(template);
            unblockPage();
        }, 'html'); 
    },
    events:{
        'click .right_btn':'forgotPasswordSubmit', //This will fire.
    }, 
    forgotPasswordSubmit: function(e){
        alert($(".forgot_password_email").val());
        e.preventDefault();
    }
});

, . , . , , -:

, el. , el .

, - this el . jquery, , . , ... .!

new ForgotPasswordView ({
   el:'#master_template'
});
+1

, , . , DOM.

, , , . , .

, , HTML, .

, , jQuery 'on' .

// Put this in your view to ensure that it is only bound when the form is
// added to the page. You could substitute 'on' for 'one' if you don't want
// the binding to maintain after the first submission.
var submitForm = function(){
  $('#template_loader form').submit();
};
$('.right_button').on('click', submitForm);
+4

right_btn ?

, :)

. . Marionette.ItemView

0

More articles:


All Articles