Javascript backbone.js从系列中删除项

我目前正在学习backbone.js，想知道如何从一个系列中删除一个项目。我正在开发臭名昭著的配方应用程序，并在文本区域内逐步创建方向。我希望能够删除一个文本区域而不删除所有文本区域。创建事件如下所示：

"click #btnAddDirection": "addNewDirection"

         addNewDirection: function (ev) {
            ev.preventDefault();
            this.directionCount++;
            this.render(this.directionCount);
        },

'click .subDirection': 'subDirection'
        subDirection: function () {
            this.$el.remove();
        }

           subDirection: function (ev) {
            ev.preventDefault();
            var currentTarget = $(ev.currentTarget);
            var idx = currentTarget.data("index");
            console.log("got index of " + idx);
            $("#" + idx).remove();

我的删除如下所示：

"click #btnAddDirection": "addNewDirection"

         addNewDirection: function (ev) {
            ev.preventDefault();
            this.directionCount++;
            this.render(this.directionCount);
        },

'click .subDirection': 'subDirection'
        subDirection: function () {
            this.$el.remove();
        }

           subDirection: function (ev) {
            ev.preventDefault();
            var currentTarget = $(ev.currentTarget);
            var idx = currentTarget.data("index");
            console.log("got index of " + idx);
            $("#" + idx).remove();

我遇到的问题是，当我单击[-]按钮时，所有方向都被删除，而不是单个方向。我想我需要为方向传递某种标识符。任何帮助都将不胜感激。谢谢

以下是整个方向控制视图：

        // The Direction Control View
    var DirectionControl = Backbone.View.extend({
        render: function (directionCount) {
            if (directionCount == null) {
                directionCount = 1;
            }
            var that = this;
            var directions = new Directions();

            var completeDirections = _.invoke(directions, 'fetch');

            $.when.apply($, completeDirections).done(function () {
                var template = _.template($('#direction-control-template').html(), { directions: directions.models, directionCount: directionCount });

                $('.tblDirections').each(function () {
                    $(this).find('.addDirection').remove();
                    $(this).find('.newDirection').text('');
                });
                $(that.$el).append(template);
            });
        },

        events: {
            "click #btnAddDirection": "addNewDirection",
            'click .subDirection': 'subDirection'
        },

        directionCount: 1,

        addNewDirection: function (ev) {
            ev.preventDefault();
            this.directionCount++;
            this.render(this.directionCount);
        },

        subDirection: function () {
            this.$el.remove();
        }
    });

---

在这种情况下，一个主要的最佳实践是为每个方向提供自己的观点。然后，如果在方向视图中创建事件，它将仅在该视图中的元素上触发

在获取方向后的回调中，您可以尝试在

方向中循环每个方向，并创建一个新的DirectionView：

DirectionView = Backbone.View.extend({
    events: {/*put click events for the individual direction here*/}
    render: function(){/*render to this.el */ return this}
})

创建新的DirectionView后，可以将其渲染到现有的主视图：

$(that.$el).append(directionView.render().el);

您的
子方向
函数将在其参数中接收一个
事件
对象-您可以使用它来删除正确的方向。我建议为每个方向添加一个
id
，但是如果你不担心重复，你可以假装方向的内容就是
id
。例如：

subDirection: function(event){
  var $direction = $( event.currentTarget ).siblings('.direction-container');
  var directionId = $direction.text();

  // loop through the model's directions until you find the corresponding direction
  // then remove that from the directions array

  this.render(); // re-render the view
}

这更像是一个jQuery风格的解决方案——不是像@Kyle R那样的主干最佳实践，但这将实现您所寻找的目标。
最终有效的方法是以这种方式向项目添加数据索引

   <!--Table for Direction entry control -->
<script type="text/template" id="direction-control-template">

    <table class="tblDirections" id="idx_<%= directionCount %>">
        <tr>

            <td class="Directionlabel">Step # <%= directionCount %><input type="hidden" name="DirectionStep" value="1" />:</td>
            <td class="Direction"><textarea id="Direction" rows="5" cols="70"></textarea><br></td>
            <td>
                    <button type="button" id="btnAddDirection" class="btn btn-success btn-xs addDirection">+</button>
                    <button type="button" id="btnSubDirection" class="btn btn-danger btn-xs subDirection" data-index="idx_<%= directionCount %>">-</button>
            </td>
        </tr>
    </table>
</script>

在没有看到标记和视图的情况下，很难精确定位，但听起来您的单击事件与所有文本区域都匹配，它们是否都具有相同的类（子方向）？是的。我想知道如何将directionCount添加到每个区域以进行区分。只是不确定具体的方式或位置。您的
$el
是整个视图的根元素，因此当您删除它时，您正在删除视图中的所有内容。在本例中，您要做的是使用传入事件来获取触发事件的元素。例如
子方向：函数（e）{$（e.currentTarget）.remove（）；}
。或者，您可以为每个方向创建一个单独的视图。非常感谢。我想我会回去看看我是否能先实现这个。