0

backbone.js と 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>

貴重なご回答をお待ちしております。ありがとう

4

2 に答える 2

3

$('#SampleForm')DOM の準備が整うまで、セレクターの呼び出しを遅らせる必要があります。

バックボーン オブジェクトはオブジェクト リテラルで定義されます。つまり、右側の値がすぐに評価されます。すぐに評価されるため、DOM は準備ができておらず、jQuery はフォームを見つけることができません。

ここに問題の詳細な説明といくつかの可能な解決策を書きました: http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/

于 2011-11-09T15:08:34.277 に答える
1

DOM が作成されていないため、そこで jquery を呼び出すことはできません。DOM の準備が整い、コードが機能するようになったら、FamilyListView を初期化します。

$(document).ready(function(){
    var foo = new FamilyListView({el: $('form')});
});
于 2011-11-09T14:10:17.213 に答える