скрыть форму при нажатии кнопки

Я перечислил приложение Marionette ниже и HTML следует. Я хотел бы сделать так, чтобы форма исчезла со страницы при нажатии кнопки «Процесс». В методе hideForm у меня есть несколько вещей, которые я пытался скрыть форму в событии click. Из этих попыток работает только эта команда «$ ('. Form»). Hide(). Проблема заключается лишь в том, что, когда кнопка нажата, форма исчезает, а затем сразу же появляется. В конечном счете, я хотел бы знать, что я делаю неправильно, но если кто-нибудь скажет мне, почему другие методы, которые у меня есть в методе hideform, ничего не делают, мне бы хотелось объяснить.скрыть форму при нажатии кнопки

MyApp = new Backbone.Marionette.Application(); 

MyApp.addRegions({ 
formBox : '#formBox', 
listBox : '#listBox' 
}); 

Entry = Backbone.Model.extend({ 
defaults: { 
    entry : 'Blank' 
}, 
}); 

EntryList = Backbone.Collection.extend({ 
model: Entry 
}); 

FormView = Backbone.Marionette.ItemView.extend({ 
tagName: 'form', 
template: '#form-template', 
className: 'form', 

events:{ 
    'click #processInput' : 'hideForm' 
}, 

hideForm : function(){ 
    //$('.form').css('display','none') 
    //document.getElementById("form").style.display="none"; 
    $('.form').hide(); 
} 

}); 

EntryView = Backbone.Marionette.ItemView.extend({ 
tagName: 'tr', 
template: '#entry-template', 
className: 'entry', 

events: { 
    'click .delete' : 'destroy' 
}, 

destroy : function() 
{ 
    this.model.destroy(); 
} 
}); 

EntriesView = Backbone.Marionette.CompositeView.extend({ 
tagName: 'table', 
template: '#entries-template', 
itemView: EntryView, 

appendHtml: function(collectionView, itemView){ 
    collectionView.$('tbody').append(itemView.el);  
} 
}); 

MyApp.addInitializer(function(test){ 
    var entriesView = new EntriesView({ 
    collection: test.entry 
    }); 

    var formView = new FormView(); 
    MyApp.formBox.show(formView); 
    MyApp.listBox.show(entriesView); 
}); 

$(document).ready(function(){ 
    var ents = new EntryList([ 
    new Entry({ entry: 'test a' }), 
    new Entry({ entry: 'test b' }), 
    new Entry({ entry: 'test c' }) 
]); 

MyApp.start({entry: ents});

});

HTML:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="stylesheet" href="assets/screen.css"> 
     <title>Simple Demo</title> 
</head> 
<body> 
     <div id = "formBox"> 
     </div> 

     <div id = "listBox"> 
    </div> 
    <script type="text/template" id="form-template"> 
      <input id = "a" placeholder = "a" autofocus> 
      <br /> 
      <input id = "b" placeholder = "b"> 
      <br /> 
      <textarea id = "c" placeholder = "c"></textarea> 
      <br /> 
      <button id = "processInput" >process</button> 
     </script> 
    <script type="text/template" id="entries-template"> 
      <thead> 
       <tr class='header'> 
        <th>Entry</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </script> 
     <script type="text/template" id="entry-template"> 
      <td><%- entry %></td> 
      <td><button class="delete">Delete</button></td> 
     </script> 
    <script src="js/lib/jquery.js"></script> 
    <script src="js/lib/underscore.js"></script> 
    <script src="js/lib/backbone.js"></script> 
    <script src="js/lib/backbone.marionette.js"></script> 
    <script src="js/demo.js"></script> 
</body>

источник

2013-07-03 Anonymous

Пробовали ли вы 'это. $ El.hide()'? – kalley

Это имеет тот же эффект, что и «$ ('. Form'). Hide()« он исчезает, а затем снова появляется –

Как вы можете увидеть здесь: http://jsfiddle.net/9Vp3A/

Оказывается, что кнопка становится неявный тип "представить". Возврат false исправляет проблему.

hideForm : function(){ 
    //$('.form').css('display','none') 
    //document.getElementById("form").style.display="none"; 
    //$('.form').hide(); 
    this.$el.hide(); // This is cached on the object. Best to use it. 
    return false; 
}

источник

2013-07-03 14:12:09 kalley

. Другое возможное решение - перейти в FormView и изменить тэг на «div» вместо «form», то вам не нужно возвращать false. Но так или иначе работает –

Try:

$('.form').css({"display":"none"});

Это скроет форму, как если бы его не существовало в коде.

Or (@ раствор Makis192)

$('.form').style.visibility = "hidden";

Что будет скрывать от но по-прежнему показывать пустое пространство

источник

2013-07-03 14:12:18 zurfyx

скрыть форму при нажатии кнопки

ответ

Смежные вопросы