0

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

4

1 回答 1

0

我们在工作中开发的应用程序也有类似的问题。我们也在使用 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 将其传递到您的模式。我想你必须权衡是什么让你的应用程序性能更高。

于 2013-04-27T04:38:18.563 回答