2

この質問には、おそらく以下の説明よりもうまくやろうとしていることを示す、うまくいかないフィドルがあります。http://jsfiddle.net/mjmitche/RRXnK/330/

フォームラベルが表示されたフォームと、各ラベルの下にあるボタンをクリックして、css を使用して非表示になっているフォームフィールドを表示できるようにする必要があります。各フォームフィールドはクラスで隠されています

I love to play the piano. <-this is a form label
Click to Open Form <- this is a button that opens invisible form field

I practice five hours every day. <-this is a form label
Click to Open Form  <- this is a button that opens invisible form field

これは、フォーム フィールドを非表示にする CSS です。

.span5.invisiblekey {
    display: none;
}

各ラベルの下にあるボタンをクリックして、各ラベルに関連付けられたフォーム フィールドを表示したいと考えています。これは JavaScript (バックボーンを使用) ですが、それぞれのボタンがクリックされたときにフォーム フィールドが 1 つだけ表示されるように、ボタンを特定のフォーム フィールドにリンクする方法がわかりません。

可能であれば、showFormメソッドの JavaScript が正しいフォーム フィールドを表示できるように、フォームの id と data-attributes に何を設定すればよいかを教えていただけませんか? 

var FormView = Backbone.View.extend({

    el: '#formscript', 

    events: {
        'click .fix': 'showForm'
    },

    showForm: function () {
        alert("form clicked");
    }

});

var form_view = new FormView();

これがhtmlです。データ属性と ID を設定できる内容については、ある程度の柔軟性があります。

<div id="formscript">
<div class="row">
    <p class="span3">
        <label for="title">I love to play the piano.</label> 
       <a class="btn btn-small btn-warning fix" data-i-love-to-play-the-piano="i-love-to-play-the-piano" href="#">Click to Open Form</a> 
    </p>
    <p class="span3">
        <input class="span5 invisiblekey" data-i-love-to-play-the-piano="i-love-to-play-the-piano" id="i-love-to-play-the-piano" name="i-love-to-play-the-piano" type="text" value="">
    </p>
</div>

    <div class="row">
       <p class="span3">
         <label for="I_practice_five_hours_every_day.">I practice five hours every day.</label>
          <a class="btn btn-small btn-warning fix" data-i-practice-five-hours-every-day="i-practice-five-hours-every-day" href="#">Click to Open Form</a>  
         </p>
         <p class="span3">
            <input class="span5 invisiblekey" id="i-practice-five-hours-every-day"  name="i-practice-five-hours-every-day" type="text" value="I practice five hours every day.">
         </p>             
    </div>        
 </div>//formscript id

アップデート

それが違いを生む場合、私の実際の（Rails）アプリでは、htmlはID #new_group を持つフォーム内にあることに注意してください

<form accept-charset="UTF-8" action="/entries/11/corrections" class="nifty_form" id="new_group" method="post"><div style="margin:0;padding:0;display:inline">
4

4 に答える 4

2

バックボーンを使用し、jQuery ロジックを使用してデータを操作するのは悪い習慣だと思います。これは、ビューとの間の密接な結合を引き起こすためDOMです。これは良い習慣ではありません。推奨される方法は、対応するデータを表示するテンプレートを使用して、その特定のビューに固有のものにすることです。

それらを各ビューに分けることができれば、特定のビュー自体で要素を検索できるため、そもそもデータ属性は必要ありません。そして、最初のHTMLフットプリントは非常に小さくなります。

テンプレート

    <div id="formscript">
    </div>

   <!-- Created a template for each form view -->
    <script type="text/template" id="row-template">
            <p class="span3">
                <label for="title"><%= name %></label> 
                <a class="btn btn-small btn-warning fix" href="#">Click to Open Form</a> 
            </p>
            <p class="span3">
                <input class="span5 invisiblekey" type="text" value="<%= name %>" />
            </p>
    </script>

Javascript

 // Model that holds the data for the view
    var Form = Backbone.Model.extend({
        idAttribute: 'id'
    });

    var Forms = Backbone.Collection.extend({
        model: Form
    });

    // Add the models to the collection
    var forms = new Forms([{
        name: "I love to play the piano",
        id: 1
    }, {
        name: "I practice five hours every day",
        id:2
    }]);

   // This is the view for each form Item
    var FormItemView = Backbone.View.extend({
        className: 'row',
        events: {
            'click .fix': 'showForm'
        },
        // Template structure for the view
        template : _.template($('#row-template').html()),
        // This is the only code required for the input 
        // to be shown                                  
        showForm: function () {
            $('.span5.invisiblekey', this.$el).toggle();
        },
        // Rendering the View for each model passed
        render: function () {
            this.$el.append(this.template(this.model.toJSON()));
            return this;
        }
    });

    // This will be the main view
    var FormView = Backbone.View.extend({
        el: '#formscript',
        // Method that initializes each view for a model
        // and renders it
        renderFormItem: function(form) {
            var formItemView = new FormItemView({
                model: form
            });
            this.$el.append(formItemView.el);
            formItemView.render();
        },
        render: function() {
            // Iterate over the collection and render a view
            // for each model in the collection
            var thisView = this;
            this.$el.empty();
            _.each(this.collection.models, function (form) {
                thisView.renderFormItem(form);
            });
            return this;
        }
    });


    // Initialize the form and call render
    var form_view = new FormView({
        collection: forms
    });
    form_view.render();

フィドルをチェック

jQuery をさまざまな方法で使用して、同じ機能を実装できます。views and the DOMしかし、特にバックボーンを使用している場合は、スケーラブルなアプリケーションを作成したい場合は、間の密結合を引き起こす純粋な DOM 操作の代わりに、バックボーンが提供するオプションを使用しないでください。これは良い兆候ではありません。

于 2013-08-07T03:51:17.497 に答える
2

以下は、現在の HTML 構造でそれを行う方法の例です。

showForm: function (e) {
    $(e.currentTarget).closest(':has(.invisiblekey)').find('.invisiblekey').removeClass('invisiblekey');
}

ただし、それはあまり効率的ではありません。代わりにできることは、data-name-of-the-field="name-of-the-field"属性の名前を のようなものに変更するdata-field-id="id-of-the-field"ことです。次に、次のようにします。

$('#' + $(e.target).attr('data-field-id')).removeClass('invisiblekey');

編集: @Sushanth のソリューションでこのアプローチを使用することを強く検討する必要があります。

于 2013-08-07T03:28:31.093 に答える
1

バックボーンの使用方法はわかりませんがdata-form、ボタンに属性を設定し、このフィールドに含まれる ID に基づいてフォームを選択することで、求めていることを実行できます。

入力 ID を編集したので、ID にはスペースが含まれていません (これは ID 属性では無効です)。name 属性のスペースも削除する必要があります。

HTML

<a class="btn btn-small btn-warning fix" data-form="i-love-the-rain" href="#">Fix It</a>
<input class="invisiblekey" id="i-love-the-rain" name="correction[data][I love the rain.]" type="text" value="">

JavaScript

$('a').click(function (e) {
    id = $(this).data('form');
    // Three methods to show element
    // $('#' + id).show();
    // $('#' + id).toggleClass('invisiblekey');
    $('#' + id).removeClass('invisiblekey');
});

フィドル: http://jsfiddle.net/BqGK7/1/

于 2013-08-07T03:24:05.247 に答える
1

マークアップが常に知られている場合は、previousElementSibling (または互換性のニーズに応じて previousSibling) のようなものを使用して dom をナビゲートできます。

働くフィドル

醜いバージョンですが、chrome/safari で動作します (すべてのブラウザー/バージョンにまたがるわけではありません)...

showForm: function (evt) {
    evt.target.parentElement.nextElementSibling.firstElementChild.classList.remove('invisiblekey');
}
于 2013-08-07T03:29:56.757 に答える