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（使用 Backbone），但我不知道如何将按钮与每个特定的表单域链接，以便在单击每个相应的按钮时只显示一个表单域。

如果可能的话，你能帮我弄清楚在表单的 ids 和 data-attributes 中设置什么，以便 JavaScript inshowForm方法可以显示正确的表单字段吗？ 

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

我觉得使用 Backbone 和使用 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 来实现相同的功能。但是，当您专门使用骨干网时，为什么不使用 Backbone 必须提供的选项，而不是使用会导致两者之间紧密耦合的纯 DOM 操作，views and the 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

如果您的标记始终是已知的，您可以使用类似 previousElementSibling（或 previousSibling，取决于兼容性需要）之类的方式在 dom 中导航：

工作小提琴

丑陋的版本，但它适用于 chrome/safari（不能跨所有浏览器/版本）...

showForm: function (evt) {
    evt.target.parentElement.nextElementSibling.firstElementChild.classList.remove('invisiblekey');
}
于 2013-08-07T03:29:56.757 回答
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 回答