Блог

Я попытался создать страницу взаимодействия с пользователем с backbone.js amp; php. Но я не могу вызвать функцию при отправке HTML-формы. Кто-нибудь может мне помочь?

Вот код

         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone.js"></script>

    <!--- Here are the backbone code --->

    <script type="text/javascript">
     var FamilyModel = Backbone.Model.extend({ 
       defaults: { 
         name: "Corleone" 
       },
       url: "back.php"
     }); 

     var FamilyList = Backbone.Collection.extend({
       model: FamilyModel 
     });


    var FamilyListView = Backbone.View.extend({  
        el: $('#SampleForm'),
        model: FamilyModel,
        events: {
          'click #Submit': 'createOne'
        },
        createOne: function(e){
        e.preventDefault();

           alert('Yes');
        }

     });

  // Fire up the application:
  window.App = new FamilyListView;
    </script>

<!-- //HTML -->
<form name="SampleForm" id="SampleForm">
<table>
<tr><td>Name:</td><td><input type="text" name="varName"></td></tr>
<tr><td>Age:</td><td><input type="text" name="intAge"></td></tr>
<tr><td>Mobile:</td><td><input type="text" name="intMobile"></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="Submit" id="Submit" value="ADD"></td></tr>
</table>
</form>
  

Ожидаю вашего ценного ответа как можно скорее.
Спасибо

Вам нужно отложить вызов вашего $('#SampleForm') селектора до тех пор, пока DOM не будет готов.

Магистральные объекты определяются с помощью объектных литералов, что означает, что значение справа вычисляется немедленно. Поскольку он вычисляется немедленно, DOM не готов, и jQuery не может найти вашу форму.

Я написал подробное объяснение проблемы и некоторые возможные решения, здесь: http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/

Вы не можете вызвать jquery там, потому что DOM не создан. Инициализируйте свой FamilyListView, когда DOM будет готов, и ваш код должен работать.

 $(document).ready(function(){
    var foo = new FamilyListView({el: $('form')});
});