0

これが現在のコードです。これにより、データベースにある「チーム」のリストが生成され、ページに出力されます。HTML コードは .jade のテンプレートを使用して記述されていますが、何が起こっているのかを理解するのは簡単です。

チームジェイド

div.teamList
                    form.form-horizontal(action='/team', id="teamForm")
                        div.control-group
                            label.control-label(for="teamId") Team Id:
                            div.controls
                                input#teamId.input-small(type="text")
                        div.control-group
                            label.control-label(for="teamName") Team Name:
                            div.controls
                                input#teamName.input-small(type="text")
                        div.control-group
                            div.controls
                                button#teamUpdate.btn.btn-primary.btn-mini(type="submit", value="Update Team") Update
                        div.control-group
                            label.control-label(for="newTeamName") Enter new team:
                            div.controls
                                input#newTeamName.input-small(type="text")
                        div.control-group
                            div.controls
                                button#teamConfirm.btn.btn-primary.btn-mini(type="submit", value="Save Team") Submit
                br
                div.teamList(style='border: none; background: #cecece; color: #1a1a1a; padding: 4px; width: 400px; height: 315px; overflow: auto;')
                    include showTeams

showTeams.jade

div#teamListDiv
    - if(allTeams.length > 0){
        table
            thead
                tr
                    th Name
            tbody
                tr
                    td
                        - each team in allTeams
                            include teamDisplay
    - } else {
        h3 No teams till now..
    - }

teamDisplay.jade

div.teams(id="team-#{team.key}")
  p #{team.name}

現時点では、実行時にデータベース内のすべてのチームのリストが生成されますshowTeams。このファイルは、div の名前として をteamDisplay使用して、チームごとに新しい div を生成します。key

div 内で生成する代わりに、p #{team.name}簡単にリンクを生成したいと考えています。しかし、リンクをクリックすると、テキストボックスteamIdとteamNameテキストボックスに対応するデータが入力されます。

私はこれをteam.jsに持っています:

Team.initIndexPage = function(){
    $('#teamConfirm').click(function(){
        submitTeam();
    });

    submitTeam = function(){
        // frontend sends data - backend parses the data
        var teamForm = {
            name : $('#newTeamName').val()
        };
        // Basic validation
        $.post('/save/team', {'teamForm' : teamForm}, function(response) {
                console.log(response);
        });
    };

};

ご覧のとおり#teamConfirm、私は新しいチームを提出することについて言及しているので、私の質問は...チーム リンクのいずれかがクリックされた状況をどのように言及すればよいでしょうか...テキストボックスに正しいデータが入力されるということですか?

どんな助けでも感謝します。

4

1 に答える 1

0

あなたが言ったことすべてに 100% 従ったかどうかはわかりませんが、あなたの問題は node/mongo とはあまり関係がないようで、フロントエンドの JavaScript の問題が多いようです。どのリンクがクリックされているかを追跡したい場合は、javascript の「this」コンテキストを使用できます。

したがって、すべてのリンクに共通のクラス名を付け、team.js のコードを次のように変更すると、次のようになります。

$('.teamLink').click(function(){
    submitTeam($(this)); // $(this) keeps track of the actual link that was clicked.
});

その後、submitTeam() でそのコンテキストを取得し、それを使用して必要に応じて要素を操作できます。

于 2013-01-25T20:43:14.467 に答える