0

我在下面列出了 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>

4

2 回答 2

0

正如你在这里看到的：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-03T14:12:09.840 回答
0

尝试：

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

这将隐藏表单，就好像它在代码中不存在一样。

或者（@Makis192 解决方案）

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

这将隐藏从但仍显示空白

于 2013-07-03T14:12:18.300 回答