Javascript 如何避免使用主干提交表单时获取请求_Javascript_Html_Backbone.js

Javascript 如何避免使用主干提交表单时获取请求

javascript html backbone.js

Javascript 如何避免使用主干提交表单时获取请求,javascript,html,backbone.js,Javascript,Html,Backbone.js,我正在尝试使用Backbone.js编写一个可编辑表这是我的Backbone.js应用程序： <!DOCTYPE html> <html lang="en"> <head> <title>Resume builder!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link re

我正在尝试使用Backbone.js编写一个可编辑表

这是我的Backbone.js应用程序：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Resume builder!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

    <style>
        .jumbotron {
            height: 100vh;
        }

        body {
            background-color: white !important;
        }

        .table-bordered th,
        .table-bordered td {
            border: 1px solid #ddd!important
        }
    </style>

</head>

<body>

    <div class="jumbotron">
        <div class=container>
            <h1>Resume builder</h1>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Degree</th>
                        <th>Starting date</th>
                        <th>Ending date</th>
                        <th>Details</th>
                    </tr>
                </thead>

                <tbody id="informations">
                    <script type="text/template" id="info-row">
                        <tr>
                            <td>
                                <%=title%>
                            </td>
                            <td>
                                <%=start%>
                            </td>
                            <td>
                                <%=end%>
                            </td>
                            <td>
                                <%=details%>
                            </td>
                            <td>
                                <botton class="btn btn-primary" data-action="modify">edit</botton>
                                <botton class="btn btn-danger" data-action="delete">delete</botton>
                            </td>
                            <tr>
                    </script>

                </tbody>
            </table>

            <div id="actions">
                <botton class="btn btn-primary" id="addInformation">Add information</botton>
            </div>


            <script type="text/template" id="info-modify">
                <div class="modal fade" id="edit-modal" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">INFORMATION</h4>
                            </div>
                            <div class="modal-body">
                                <form role="form">
                                    <div>
                                        <div class="radio">
                                            <label><input type="radio" data-type="education" name="type" <%= (type == "education") ? "checked" : ""%>> Education</label>
                                        </div>

                                        <div class="radio">
                                            <label><input type="radio" data-type="experience" name="type" <%= (type == "experience") ? "checked" : ""%>> Experience</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Title for Degree or experience (e.g. Computer Sci. | Software dev.):</label>
                                        <input type="text" class="form-control" value="<%=title%>" name="title">
                                    </div>

                                    <div class="form-group">
                                        <label>Start date:</label>
                                        <input type="number" class="form-control" value="<%=start%>" name="start">
                                    </div>

                                    <div class="form-group">
                                        <label>End date:</label>
                                        <input type="number" class="form-control" value="<%=end%>" name="end">
                                    </div>

                                    <div class="form-group">
                                        <label>Details:</label>
                                        <textarea rows="5" class="form-control" name="details"><%=details%></textarea>
                                    </div>

                                    <button type="submit" class="btn btn-success">Submit</button>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
            </script>

            </div>
        </div>

        <div id="modal">
        </div>

</body>

<script>
    $(function() {
        var baseModalView = Backbone.View.extend({
            el: $("#modal"),
            className: 'modal fade hide',
            template: _.template($("#info-modify").html()),
            events: {
                'hidden': 'teardown',
                "click [type='submit']": "notify"
            },
            initialize: function() {
                _.bindAll(this, "show", "teardown", "render", "notify");
                this.render();
                this.show();
            },
            show: function() {
                this.$el.modal('show');
            },
            teardown: function() {
                this.$el.data('modal', null);
                this.remove();
            },
            render: function() {
                this.$el.empty();
                this.setElement(this.template(this.model.toJSON()));
            },
            notify: function() {
                var self = this;
                this.model.set({
                    type: self.$el.find("[type='radio']:checked").data("type"),
                    start: self.$el.find("[name='start']").val(),
                    end: self.$el.find("[name='end']").val(),
                    details: self.$el.find("textarea").text()
                });
            }
        });

        var InformationModel = Backbone.Model.extend({
            id: -1,
            defaults: {
                type: " ",
                title: " ",
                start: 2015,
                end: 2016,
                details: " "
            }
        });

        var InformationView = Backbone.View.extend({
            events: {
                "click [data-action='modify']": "modifyInformation",
                "click [data-action='delete']": "deleteInformation"
            },
            template: _.template($("#info-row").html()),
            initialize: function() {
                _.bindAll(this, "render", "modifyInformation", "deleteInformation");
                this.render();
            },
            render: function() {
                this.setElement(this.template(this.model.toJSON()));
            },
            modifyInformation: function() {
                var self = this;
                modalView = new baseModalView({
                    model: self.model,
                    template: _.template($("#info-modify").html())
                });
            },
            deleteInformation: function() {
                this.model.destroy();
            }
        })

        var InformationCollection = Backbone.Collection.extend({
            url: "../dummy/",
            model: InformationModel
        });

        var InformationsView = Backbone.View.extend({
            el: $("#informations"),
            initialize: function() {
                _.bindAll(this, "render", "addInformation");
                var self = this;
                this.collection = new InformationCollection();

                this.collection.bind("all", this.render, this);

                this.collection.fetch();

                // I know this is not a Backbone way...
                $("#addInformation").on("click", function() {
                    self.addInformation();
                });
            },
            render: function() {
                this.$el.empty();
                this.collection.each(function(information) {
                    var informationView = new InformationView({
                        model: information
                    });
                    this.$el.append(informationView.el);
                }, this);
            },
            addInformation: function() {
                var self = this;
                modalView = new baseModalView({
                    model: new InformationModel()
                });
            }
        });


        new InformationsView();

        $("form").submit(function(e) {
            e.preventDefault();
            return false;
        });
    });
</script>

</html>


简历生成器！
琼伯伦先生{
高度：100vh；
}
身体{
背景色：白色！重要；
}
.桌边为th，
.带边框的桌子{
边框：1px实心#ddd！重要
}
简历生成器
度
开始日期
结束日期
细节
编辑
删除
添加信息
&时代；
信息
教育类
经验
学位或经验头衔（如计算机科学|软件开发）：
开始日期：
结束日期：
细节：
提交
接近
$（函数（）{
var baseModalView=Backbone.View.extend({
el:$（“#模态”），
className:“模式淡入淡出隐藏”，
模板：35;.template（$（“#信息修改”）.html（），
活动：{
“隐藏”：“撕裂”，
“单击[type='submit']：“通知”
},
初始化：函数（）{
_.bindAll（这是“显示”、“拆卸”、“渲染”、“通知”）；
这个。render（）；
this.show（）；
},
show:function（）{
本.$el.modal（'show'）；
},
拆卸：函数（）{
此.$el.data（'modal'，null）；
这个。删除（）；
},
render:function（）{
这个。$el.empty（）；
this.setElement（this.template（this.model.toJSON（））；
},
通知：函数（）{
var self=这个；
这个。模型。集合({
类型：self.$el.find（“[type='radio']：选中”）.data（“type”），
start:self.$el.find（“[name='start']”）val（），
end:self.$el.find（“[name='end']”）val（），
详细信息：self.$el.find（“textarea”）.text（）
});
}
});
var InformationModel=Backbone.Model.extend({
id:-1，
默认值：{
类型：“，
标题：“，
开始日期：2015年，
完二零一六年，
详情：“
}
});
var InformationView=Backbone.View.extend({
活动：{
“单击[data action='modify']：“modifyInformation”，
“单击[数据操作=”删除“]：“删除信息”
},
模板：35;.template（$（“#信息行”）.html（）），
初始化：函数（）{
_.bindAll（这是“呈现”、“修改信息”、“删除信息”）；
这个。render（）；
},
render:function（）{
this.setElement（this.template（this.model.toJSON（））；
},
修改信息：函数（）{
var self=这个；
modalView=新的baseModalView({
模型：self.model，
模板：35;.template（$（“#信息修改”）.html（）
});
},
deleteInformation:function（）{
this.model.destroy（）；
}
})
var InformationCollection=Backbone.Collection.extend({
url:“../dummy/”，
模型：信息模型
});
var InformationsView=Backbone.View.extend({
el:$（“#信息”），
初始化：函数（）{
_.bindAll（本“呈现”、“补充信息”）；
var self=这个；
this.collection=新通知
$("form").submit(function(e) {
            e.preventDefault();
            return false;
        });

$(document).on("submit", "form", function(e) {
            e.preventDefault();
            return false;
        });

<button type="button" class="btn btn-success">Submit</button>

<div id="test-view">

    <form id="test-form">
        <input type="text" name="test">
        <button type="submit">Submit</button>
    </form>
</div>

var FormView = Backbone.View.extend({
    events: {
        "submit #test-form": "onSubmit"
    },
    onSubmit: function(e) {
        e.preventDefault();
        console.log("test-form submit prevented");
    }
});

var view = new FormView({
    el: $('#test-view')
});