Backbone View, после чего исчезает

Question

У меня есть представление, созданное с помощью Backbone.js и вставленное в элемент div - оно отображается примерно в течение секунды, а затем исчезает.

Вот мой код для просмотра:

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