0

How can I prevent default event in a child view in backbone

The parent view is actually a form which submits data to the server.

The child view it is a component which is an extension of the parent view and it has couple of interactions: able to add remove items before submission

the child view`s important markup

<input class="tags search-input" type="text" name="search" evt="keyup=search"
               id="search-tags" autocomplete="off" placeholder="Search for tag"/>

this will be populated as ul and user can select multiple options

In my child view I have the following method which adds items to the form on key enter, but should be prevented to fire the parents view submit action

var ChildView = Parent.View.extend({

    render: function() {
       /* the view is rendered twice because of parent view so I use this*/
       Parent.View.prototype.render.apply(this);
       // selector inits as var and other event bindings related to this view
    },
    search: function(e) {

                switch(e.keyCode) {
                    case 13:
                        e.preventDefault();
                        e.stopPropagation();
                        console.log(e)
                        //execute model task
                        break;

                    default:
                        //default model task
                        break;
                }
            }
})

but this code actually tries to execute parents view submit action. I would like to prevent

fefe
  • 8,755
  • 27
  • 104
  • 180
  • as I'm not a backbone expert can you please explain, why this is an inappropriate question? – fefe Jan 14 '18 at 18:48
  • 1
    ok let me try to update my code – fefe Jan 14 '18 at 20:34
  • While you provided more code, it's still incomplete and can't be verified so the question is unlikely to be answerable. – Emile Bergeron Jan 15 '18 at 13:37
  • The code above is not complete since it doesn't even show how the event binding is done to invoke `search`. Anyway, you already have `e.preventDefault(); e.stopPropagation();` if these are not working, then only an [mcve] would help to identify why... – T J Jan 24 '18 at 15:24
  • The problem identified and fixed I had tu use `Parent.View.prototype.init.apply(this);` – fefe Jan 24 '18 at 16:35

0 Answers0