重用模式模板

Question

On my current project, there are starting to be a few views that are modal views that are being used to delete items on the site. They are currently generic in that it's just a text description of the item they are deleting. Maybe in the future there will be an icon or a short description as well. There are now tasks to have that functionality to delete other stuff on our site. I'm new to the web, MVC, asp.net, etc, and what I want to know is if it's better to reuse our current modal view somehow, and pass in the objects we need to show in the view. Because the view needs to send the url back to the server on which items to delete, that part of code would need to be different for the view as well. Here is some of the stuff in our view along with a .cshtml template that's pretty generic that I didn't include.

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

    });
})();

As I am looking through the code, and this being my first real project, it seems like a lot of things that could be quite similar, like deleting a Gift, deleting a Toy, etc have different Controllers for each (GiftController, ToyController), and hit different URLs. So currently things are all in their own class like that. I was wondering if that's the more standard way to approach these types of problems as well with views. Thanks in advance!

Answer 1

The app we're developing at work had a similar issue. We're using Backbone too so I can completely relate to this. What I ended up doing is have a sort of ModalBuilder that builds a form in a modal for you and binds events on the form elements for submit. The initialization of it could look like this:

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

What we do is we have different templates for every form element, inputfields and textareas and so on and we reuse it all over the place. ModalBuilder takes these arguments and builds a form

Also for certain cases it might be better to render the form server-side and deliver it to your modal via ajax. You have to weigh what makes your app more performant I suppose.