2

私はasp.netを使用しているので、すでに<fomr id="aspnetForm" name="aspnetForm">.

「複数のフォームを個別に送信」できるページが欲しい。たとえば、ユーザーに履歴書を保存してもらいたいとします。「教育体験」ページで、ユーザーの複数のレコードを許可したいのですが、各レコードはajaxで個別に編集および保存できますが、ajaxの前に検証されます。

何かのようなもの：

<form id="aspnetForm" name="aspnetForm">
<div class="item_edit">
    1
    <input type="text" class="required" name="title" />
    <input type="text" class="required" name="description" />
    <input type="button" class="save" value="save" />
</div>
<div class="item_edit">
    2
    <input type="text" class="required" name="title" />
    <input type="text" class="required" name="description" />
    <input type="button" class="save" value="save" />
</div>
</form>

$("input.save").click(function(){
    var thediv = $(this).parent();
    if(thediv.valid()){
        //save with ajax
    }
    else{
        //show error, modal window preferred
    }
})

ところで：私は backbone.js を使用しています。

編集: backbone.js の私のコードは以下のようなものです。上記<div class="item_edit">はテンプレートからレンダリングされました。

APIPortfolio.Views.OtherInfoCollection = Backbone.View.extend({
    el : "#otherinfo-container",
    template : "#otherinfo-template",
    initialize : function(options) {
    this.modelList = options.modelList.models;
    },
    render : function() {
        var self = this;
    $(self.el).empty();
    _.each(this.modelList, function(model) {
            $(self.el).append(Mustache.to_html($(self.template).html(), model.toJSON()));
    })
    return this;
}
});
4

3 に答える 3

0

'item_edit' divにさらに多くの種類のフォーム要素があると仮定すると、div内の各フォーム要素にクラスを追加して'item'と呼ぶことができます。したがって、「item_div」は次のようになります。

<div class="item_edit">
    1
    <input type="text" class="required item" name="title" />
    <input type="text" class="required item" name="description" />
    <input type="button" class="save" value="save" />
</div>

これは、「item_edit」内に「title」と「description」しかないことを前提としないようにするためです。

次の方法で、フォームの部分的な要素を保存する関数を定義できます。

function savePartial(itemEditDiv)
{
    var bool = true;
    $(itemEditDiv).find('item').each(function(){
        var val = $(this).val()    //this is the value of the 'title' or 'description' etc
        //code to check if the value is valid (set bool = false in case its not valid)
    });
    return bool;
}

これで、クリックイベントハンドラーを「保存」ボタンに追加して、このsavePartial関数を呼び出すだけです。

$("input.save").click(function(){
    var thediv = $(this).parent();
    if(savePartial(thediv))
    {
         //success message
    }
    else
    {
        //something went wrong
    }
});

さらに、「msg」パラメータを「item」フィールドに追加し、配列内の無効なアイテムのメッセージをキャプチャして、エラーメッセージを表示することができます。

于 2012-04-20T04:54:38.670 に答える
0

実際、あなたは Backbone.js を使用していません。ただし、そうする場合は、モデル インスタンスに関連付けられたフォームを表すビューが必要です。ビュー内には、次のようにクリック イベントを処理するイベント プロパティが必要です。

var Thingy = Backbone.Model.extend({
  //implement me
})

var ThingyForm = Backbone.View.extend({
  events: function(){
    'input.save click': function(){
      if(this.model.isValid()){
          this.model.save()
      }
      else{
          //show error, modal window preferred
      }
    }
  }
})

thingy = new Thingy({attr1: 'val1', attr2: 'val2'})
thingyForm = new ThingyForm({model: thingy})

これをリモート リソースに接続したり、モデルの検証を接続したりするために、やるべきことは他にもたくさんあります。しかし、これで作業を開始できます。次の 2 つのリソースをお勧めします。

Backbone.js ドキュメント- 包括的。Backbone は非常に軽量で、おそらく 1 時間でソース コード全体を読むことができます。

Backbone Fundamentals の無料の eBook - その本の最初の 4 つまたは 5 つの章から始めることができます。

幸運を。

于 2012-04-20T04:38:41.443 に答える