Question

在我当前的项目中，开始有一些视图，这些视图是用于删除网站上项目的模态视图。它们目前是通用的，因为它只是它们正在删除的项目的文本描述。也许在将来会有一个图标或一个简短的描述。现在有任务可以删除我们网站上的其他内容。我是网络新手，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），并点击不同的URL。所以目前这些都属于他们自己的班级。我想知道这是否是更加标准的方法来处理这些类型的问题以及视图。提前谢谢！

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  
    })  
  }
})

我们所做的是为每个表单元素，输入字段和textareas等提供不同的模板，然后我们在整个地方重复使用它们。 ModalBuilder接受这些参数并构建表单

同样对于某些情况，最好渲染表单服务器端并通过ajax将其传递给模式。你必须权衡一下我认为你的应用程序更高效的原因。

重用模态模板

1 个答案: