Question

我尝试使用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>

尽快期待您的宝贵回应。感谢

Answer 1

您需要延迟调用$('#SampleForm')选择器，直到DOM准备就绪。

使用对象文字定义骨干对象，这意味着立即评估右侧的值。由于它是立即评估的，因此DOM尚未就绪，jQuery无法找到您的表单。

我在这里写了一个问题的详细解释和一些可能的解决方案：http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/

Answer 2

你不能在那里调用jquery，因为没有创建DOM。当DOM准备好并且您的代码应该工作时，初始化您的FamilyListView。

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

Backbone.js与php交互

2 个答案: