javascript - 主干 View 显示然后消失

Question

我有一个使用 Backbone.js 创建的 View ，并将其插入到 div 元素中 - 它显示大约一秒钟，然后消失。

这是我的 View 代码:

var addPlayerView = Backbone.View.extend({
    tagName: "div",
    model: Player,
    id: 'addPlayerDiv',

    initialize: function() {
        console.log('addPlayerView has been created');
    },

    render: function (){
        this.$el.html('<p>show this puppy</p>');
        return this;
    }
});

这是模型:

var Player = Backbone.Model.extend({
    defaults: {
        ID: "",
        firstName: '',
        lastName: ''
    },

    idAttribute: "ID"
});

这是 HTML:

 <form onsubmit="addNewPlayer();">
        <input type="submit" value="Add New Player New"/>
 </form>

<p>
<div id="addPlayerDiv"></div>
</p>

<script>

        function addNewPlayer() {
            var player = new Player({});
            var newPlayerView = new addPlayerView({el: $("#addPlayerDiv"), model: player});
            newPlayerView.render();
        };

</script>

addNewPlayer() 函数被正确调用，并且 newPlayerView 正在页面上呈现，但只持续了一秒钟，然后它就消失在页面上。

不知道该怎么办。有人以前遇到过这个问题吗？

Answer 1

您需要取消默认操作(在我们的例子中 onsubmit 尝试将数据发送到服务器)

<form onsubmit="addNewPlayer(); return false;">

或

<form onsubmit="addNewPlayer(event);">

function addNewPlayer(e) {
  e.preventDefault();
  .....
}

Example