Question

我正在学习backbone.js，我想知道从系列中删除一个项目。我正在研究臭名昭着的食谱应用程序，并在textareas中创建一步一步的方向。我希望能够删除一个textarea而不删除所有textarea。创建事件是这样的：

"click #btnAddDirection": "addNewDirection"

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

我的删除看起来像这样：

'click .subDirection': 'subDirection'
        subDirection: function () {
            this.$el.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();
        }
    });

Answer 1

在这种情况下，骨干最佳做法是为每个方向提供各自的视图。然后，如果在“方向”视图中创建事件，它将仅触发该视图中的元素。

在获取路线后的回调中，您可以尝试遍历directions中的每个路径并创建一个新的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);

Answer 2

您的subDirection函数会在其参数中收到event个对象 - 您可以使用此功能删除正确的方向。我建议为每个方向添加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-esque解决方案 - 而不是像@Kyle R那样的Backbone最佳实践，但这将实现您所需要的。

Answer 3

最后工作的是以这种方式向项目添加数据索引。

   <!--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>

控件如下所示：

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

backbone.js从系列中删除项目

3 个答案: