1

選択されている要素と選択されていないすべての要素のコレクションを作成したいと思います。

dom 要素はいくつかのmultiple select.
それぞれに同じユーザーがいます。
私の目標は、すべてのユーザーのコレクションを作成し、選択されたユーザーに特定の値を持つ属性を追加することです。

ここに私のコード js コード (1) があり、ここにリンクhttp://jsfiddle.net/vxRtb/9/があります。

私のコードは機能しますが、最初の選択だけですべてのユーザーを取得する必要がないため、コードを乾燥させたいと思います。
次のjsコードを乾燥させる方法のヒントはありますか?
詳細については、js コードのコメントをお読みください。ありがとう

PS：
1）私は使用jQueryしunderscore
ています.2）サーバーから、jsfiddle.net/vxRtb/9と同じようにhtmlコードを取得します

$(function () {
    var $selectElements = $('form .controls select');
    var userCollection = []; 

    // Subroutine_1
    // TODO Subroutine_1 and Subroutine_2 seems too close; any idea how to dry this code?
    $.each($($selectElements[0]), function (i, teamElement) {
        var $users = $(teamElement).find('option')

        $.each($users, function (i, user) {
            userCollection.push({
                id: $(user).val(),
                name: $(user).text(),
            });            
        });
    });

    // Subroutine_2
    $.each($selectElements, function (i, teamElement) {
        var $teamElement = $(teamElement);
        //var teamId = $teamElement.attr('id');
        var teamName = $teamElement
            .parent().parent().closest('.controls')
            .find('input').val();
        var $users = $teamElement.find('option:selected');

        $.each($users, function (i, user) {
            _.where(userCollection, {id: $(user).val()})[0].team = teamName;           
        });
    });

    console.log(userCollection);
});
​
4

1 に答える 1

0

これはかなり古い質問であり、おそらくそれから先に進んでいると思いますが、私はこれを試してみました。これが私が思いついたものです.

分析

ループは非常に似ていますが、1 つのループがチーム メンバーを構築し、もう 1 つのループがチームを把握するという重要な違いがあります。DRY オプションは、1 つのループのみを使用して、メンバーがチームを持っているかどうかをテストすることだと思います。ユーザー ID は一意ではないため、繰り返しが発生するため、いくつかのロジックを適用する必要があります。

疑似コード

  1. <option>タグ に基づいてユーザー オブジェクト コレクションを作成します。
    1. getMyTeam を使用してチーム名を生成する
  2. ユーザー オブジェクトを ID でグループ化します。
  3. チーム名を持つユーザー オブジェクトのみを取得してユーザー オブジェクトをフィルター処理する
  4. チーム名のないユーザー オブジェクトをフィルタリングして、一意のレコードのみを表示する

コード

これで良くなったかどうかはわかりません。パフォーマンスに関しては、すべてのネスティングのために、これはかなり悪いはずです。ただし、コードがよりモジュール化され、必要に応じてルールを簡単に変更できるという利点があると思います。jsフィドル

$(function () {

    // Helper to find a team based on an options element
    function getMyTeam() {
        if (this.is(':selected')) {
            var select = this.parent();
            var teamId = select.attr('id').replace(/_participations$/, '_name');
            return $('#' + teamId).val();
        }
        return undefined;
    };

    // Helper to return an object's id
    function getId(obj) {
        return obj.id;
    };

    // Helper to filter the team members by team name.
    function filterMembersByTeam(members) {
        var result = _.filter(members, function(record) {
            return !_.isUndefined(record['team']);
        });
        if (result.length === 0) { 
            result = _.uniq(members, true, function(member) {
                return JSON.stringify(member);
            })
        };
        return result;
    };

    // 1. Select the users
    var options = $('form .controls select option');

    // 2. Build up the user data
    var userCollection = _.map(options, 
                          function(option) {
                            return { 
                                    id: $(option).val(),
                                    name: $(option).text(),
                                    team: getMyTeam.apply($(option)) 
                                };
                          }); 

    // 3. Clean & filter the user data
    userCollection = 
        _.flatten( 
            _.map( _.groupBy(userCollection, getId), filterMembersByTeam) 
        );

    console.log(userCollection);
});
于 2014-04-07T20:49:34.733 に答える