翡翠/ Jqueryを使用してフォームを変更

Question

私は別のイベントに応じてオプションを変更するフォームを取得しようとしています。 .sweetが変更されたときにケーキを更新する必要がありますが、ケーキは元々res.renderに渡されており、ページをリロードせずに変更する方法はわかりません。私はこれに最適なAjaxソリューションです。

アプリ：

res.render('index', {cakes: json_object}); 

体：ケーキを変更しようとすると

form(name="myform") 
    div.input 
     each item in cakes.topping 
      input(type="checkbox", name=item.color) 
      | #{item.color} 

：

ヘッド：

$(document).ready(function(){ 
    //requesting new Object 
    $(".sweet").change(function() { 
     socket.emit('choose', {sweet: $("#cho_swe").val()}); 
    }); 

    //getting new object 
    socket.on('set_sweet', function(object){ 
     -- object is a new JSON which needs to replace cakes in the form below 
    }); 

});   

ループ内で使用できる形式に新しいオブジェクトを取得するにはどうすればよいですか？

Answer 1

注：強制的なブランド変更を尊重するためにpadeとしてjadeを参照します。

Pugは、アプリケーションファイル内でそれらをレンダリングするときにバックエンドでコンパイルされます。しかし、pugにスコープがないレンダリングされたファイルと並行して追加の変数を送信しています。あなたはそれをレンダリングするとき

は、あなたが

各

item in cakes.topping 

は、この時点で、今

<input 1/> 
<input 2/> 
etc... 

あるパグ機能へのアクセスを失い、パグのは、それが仕事です終え、今では、フロントエンドです問題。 pugのループ機能を使用することはできません。コンテンツを動的にするには、フロントエンドのフレームワークやライブラリに依存する必要があります。

は、これを処理するには、いくつかの方法がありますが、私たちはちょうどそのルートに行くことができますので、あなたはjqueryのを使用している参照してください。

$(document).ready(function(){ 
    //get the form element 
    $form = $('form[name="myform"]').empty(); 

    //requesting new Object 
    $(".sweet").change(function() { 
     socket.emit('choose', {sweet: $("#cho_swe").val()}); 
    }); 

    //getting new object 
    socket.on('set_sweet', function(object){ 
    // 
    // clear the current form and add the new html 
    // if you know most of the html before hand and just have a few dynamic 
    // fields consider having them in the pug template with 
    // display: none; 
    // 
     // dynamically add new elements without needing a page reload 
     object.forEach(function(val, key) { 
      $form.append('<div>' 
        +' <input type="checkbox" onclick="someClickHandler()" name="' + val + '"/>' 
        +' <div>' + val + '</div>' 
        +' </div>'); 
     }); 
    }); 
}); 

の場合：

ソケット放送が受信された要素を再増殖をあなたは動的なコンテンツをたくさん必要としていることを知り、angularjsのようなフレームワークとのペアリングを検討してください。しかしとして、パグが、変数やすべてが利用できるすべてとバックエンドでページをコンパイルしようとしていることを要約すると

form(name="myform") 
    div.input 
     div(ng-repeat="item in items") 
      input(type="checkbox", name=item.color) 
      | #{item.color} 

socket.on('set_sweet', function(object){ 
    $scope.items = object; 
}); 

：

角度で上記の解決策は、と同類だろうすぐに渡されてレンダリングされると、コンテンツを動的にするのはフロントエンドの仕事です。