重用模式模板

Question

在我当前的项目中，开始有一些视图是模态视图，用于删除站点上的项目。 它们目前是通用的，因为它们只是要删除的项目的文本描述。 将来可能还会有一个图标或简短说明。 现在有一些任务需要具有该功能才能删除我们网站上的其他内容。 我是Web，MVC，asp.net等网络的新手，我想知道的是，最好以某种方式重用当前的模式视图，并传递我们需要在视图中显示的对象。 由于视图需要将url发送回要删除项目的服务器，因此该视图的那部分代码也需要有所不同。 这是我们认为的一些内容，还有一个.cshtml模板，我没有包含它。

Views.DeleteGiftModal = (function () {
    return Backbone.View.extend({
        template: Templates["template-gift-delete-modal"],
        tagName: 'div',

        initialize: function (options) {

            $(window).bind("disposeModal", _.bind(this.disposeModal, this));
            _.bindAll(this, "showDialog", "disposeModal", "displayResults");

            this.eventAggregator = options.eventAggregator;
            this.itemsToDelete = options.model;
            this.errors = {};
            this.render();
            return this;
        },
        events: {
            "click #delete-btn": "deleteItems",
            "click #ok-btn": "disposeModal", 
            "click #cancel-btn": "disposeModal"
        },
        disposeModal: function (event, refresh) {
            this.$el.modal("hide");

            if (event != null && event.currentTarget != null && event.currentTarget.id == 'ok-btn')
                refresh = true;

            this.trigger("modalClosed", refresh);
            this.remove();
            this.unbind();
        },
        showDialog: function () {
            this.$el.modal("show");
        },
        deleteItems: function () {
            var self = this;
            var element = this.$el;

            var numberGifts = this.getKeys(this.itemsToDelete).length;
            this.results = [];
            var hasError = false;

            element.find("#actions").hide();
            element.find("#ok-actions").show();

            $.each(this.itemsToDelete, function(i, v) {
                // tell model to go away
                var gift = new Gift({ id: i });
                gift.destroy({
                    success: function (model, response) {
                        self.results.push({ id: model.id, response: response });

                        numberGifts--;
                        if (numberGifts <= 0) {
                            if (!hasError) {
                                self.disposeModal(null, true);
                            } else {
                                self.displayResults();
                            }
                        }
                    }
                });
            });
        },
        displayResults: function () {
            var element = this.$el;

            $.each(this.results, function(i, v) {
                // to do check response for error message
                var list = element.find("#delete-item-" + v.id);

                if (v.response.message == "Deleted") {
                    list.append("  -  <span align='right' style='color: green'>Deleted</span>");
                } else {
                    hasError = true;
                    list.append("  -  <span align='right' style='color: red'>" + v.response.message + "</span>");
                }
            });
        },
        render: function () {
            this.$el.append(this.template);

            this.$el.find("#ok-actions").hide();

            // show list of item names
            var list = this.$el.find("#items-to-delete-list");
            $.each(this.itemsToDelete, function (i, v) {
                $("<li id='delete-item-" + i + "'>" + v.name + "</li>").appendTo(list);
            });

            this.$el.attr('id', 'delete-gift-dialog');
            return this;
        }

    });
})();

当我查看代码时，这是我的第一个实际项目，似乎很多事情可能都非常相似，例如删除礼物，删除玩具等，每个都有不同的控制器（GiftController，ToyController），并点击其他网址。 因此，目前所有事物都在自己的类中。 我想知道这是否是解决这些类型问题以及视图的更标准方法。 提前致谢！

Answer 1

我们正在开发的应用程序存在类似问题。 我们也在使用Backbone，因此我可以完全与之相关。 我最终要做的是有一种ModalBuilder ，它可以为您构建模式下的表单，并将事件绑定到表单元素上以进行提交。 它的初始化看起来像这样：

new ModalBuilder({
  form: [
    { 
      tag: 'select[name="id"]',
      options: [ 
        { name: 'Item 1', id: 12 },
        { name: 'Item 2', id: 32 } 
      ]  
    },
    { 
      tag: 'input[type="submit"]', 
      value: 'Delete' 
    }
  ],
  events: function(){
    $('input[type="submit"]').on('click', function(){
      // Delete via ajax  
    })  
  }
})

我们要做的是为每个表单元素，输入字段和文本区域等使用不同的模板，然后在各处重复使用。 ModalBuilder接受这些参数并构建一个表单

同样，在某些情况下，最好呈现表单服务器端并通过ajax将其交付给您的模式。 我认为，您必须权衡使您的应用程序更具性能的原因。