How to Pass Values from view to Controller in Backbone

1,489 views
Skip to first unread message

Navy

unread,
Feb 28, 2014, 5:04:04 PM2/28/14
to backbone-...@googlegroups.com

I have implement Search functionality to Search Customers. When I enter a name of the customer and press enter , the customer table shows up the details of customer we searched for, else if search value is blank it displays all customers details

Currently this is what I have

I have a search textbox in a template and event keypress is in "CustomersView"  and it is associated with a controller named "SearchCustomer"

My Problem

When I enter the value in search textbox it is not passing the value to the controller

Questions

  • How to pass values from a view to the controller ?

Jonathan Baker

unread,
Feb 28, 2014, 5:18:46 PM2/28/14
to backbone-...@googlegroups.com
I like to have my controller manage views, and prevent views from knowing what controller is managing them. With that said, I would trigger a custom event from within your view's event handler method, and this listen for that event within you controller. This way, you can keep your views skinny and dumb, and handle the logic within your controller. Perhaps something like:

Views.CustomerView = Marionette.xxx.extend({
    ...
    events: {
        "submit #search-form", "onSubmit"
    },

    onSubmit: function(e) {
        e.preventDefault();
        this.trigger("search-form:submit", <value_from_form_here>);
    }
});

SearchCustomer = Marionette.Controller.extend({
    someMethod: function() {
        var view = new Views.CustomerView();

        view.on("search-form:submit", function(value) {
            console.log(value);
        });
    }
});


--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To unsubscribe from this group and stop receiving emails from it, send an email to backbone-marion...@googlegroups.com.
To post to this group, send email to backbone-...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette.
To view this discussion on the web visit https://groups.google.com/d/msgid/backbone-marionette/87e482d7-fbf1-41d3-8acd-88e0381c80bc%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.



--
Jonathan D. Baker
Developer
http://jonathandbaker.com

Stef

unread,
Feb 28, 2014, 5:33:13 PM2/28/14
to backbone-...@googlegroups.com
2014-02-28 23:04 GMT+01:00 Navy <veen...@gmail.com>:

My Problem

When I enter the value in search textbox it is not passing the value to the controller

Questions

  • How to pass values from a view to the controller ?

You don't. it's bad practice and lead to horrible mess, say spaghetti code. The example given by Jonathan is the proper way. 

Jeremy Mcleod

unread,
Mar 1, 2014, 2:37:21 PM3/1/14
to backbone-...@googlegroups.com
This sounds like a perfect use case for the "triggers" hash, which listens for specified DOM events and translates then into view events on that view. Then your controller just has to listen for events on the view. The marionette documentation for Marionette.View has all the necessary information.

Navy

unread,
Mar 3, 2014, 11:09:37 AM3/3/14
to backbone-...@googlegroups.com
Thank You!! everyone for the responses. I have another question

           There is another question::

 view.on("search-form:submit", function(search) {
            console.log(search);
        });

        loadCustomers: function(search) {
}


How can the "search" value can be passed to different function?


Thanks
Navy

Jonathan Baker

unread,
Mar 3, 2014, 11:34:25 AM3/3/14
to backbone-...@googlegroups.com
In the view's event handler, you can pass arguments to the trigger function. As for getting the input data out of the form, if you're building your forms manually you can extract it manually using jQuery, or use a tool such as https://github.com/derickbailey/backbone.syphon/. There are more robust form solutions, like https://github.com/powmedia/backbone-forms, that handle a lot of this for you (in addition to providing many other features).


--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To unsubscribe from this group and stop receiving emails from it, send an email to backbone-marion...@googlegroups.com.
To post to this group, send email to backbone-...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette.

For more options, visit https://groups.google.com/groups/opt_out.
Reply all
Reply to author
Forward
0 new messages