Question

我刚开始学习BackboneJS并深入内部我遇到了问题。我有一个bootstrap模式，我想在我的主视图中填充一个被调用事件函数的模态内容，并试图找出如何在我的动态生成的模态视图中注入一个子视图。到目前为止，我的代码看起来像但没有工作

主视图

//here events are mapped
    Fefe.Views = Fefe.Views || {};

    (function () {
        'use strict';

        Fefe.Views.Editor = Backbone.View.extend({

            template: JST['app/scripts/templates/editor.ejs'],

            tagName: 'div',

            el: '.container',

            id: '',

            className: '',

            events: {

                "click button.expand" : "controlToggle",
                "click .grid" : "grid"
            },


            controlToggle: function(e){
                var controlls =  $(e.currentTarget).closest('.editor-controls')

                $(controlls).find('.active').removeClass('active')
                $(e.currentTarget).parent().addClass('active')
            },

            grid: function() {

                this.model = new Fefe.Models.Grids({
                    'title': 'Edit Grids'
                })

                var gridView = new Fefe.Views.Grids({
                    model: this.model 
                })

                var grids = new Fefe.Views.Modal({
                    model : this.model,
                    subview: gridView
                }).render()

            },

            initialize: function () {
                var body = $('body')
                var rows = body.find('.row')

                $.each(rows, function(e , v){

                    $(this).addClass('editor-row empty-row')

                })

            $('.sortable-rows').sortable({ handle: 'button.row-handle.btn.btn-default' })
                this.listenTo(this.model, 'change', this.render);
            },

            render: function () {

                return this;
            }

        });

    })();

模态视图

//this one holds the modal markup

    Fefe.Views = Fefe.Views || {};

    (function () {
        'use strict';

        Fefe.Views.Modal = Backbone.Marionette.View.extend({

            template: JST['app/scripts/templates/modal.ejs'],

            subview: '',

            className: "modal",
            attributes: {
                tabindex: "-1",
                role: "dialog",
            },

            initialize: function() {          

              this.template = this.template;
              console.log(this)

            },

          events: {
              "click .save": "save",
              "click .close": "close",
              "change input": "modify",
            },

        render: function(e) {

            this.$el.html(this.template(this.model.toJSON())).modal()

            $(".modal-dialog").draggable({
                  handle: ".modal-header"
            })

            return this
        },

        show: function() {
            $(document.body).append(this.render().el);

        },

        close: function() {
            this.remove();
        },

        save: function() {
            if(this.model.id == null) {
              tasks.create(this.model);
          }
          else {
              this.model.save();
          }
          this.remove();
      },

      edit: function(e) {
        var attribute = {};

        attribute[e.currentTarget.name] = e.currentTarget.value;
        this.model.set(attribute);
    },

    });

    })();

也许这种做法是错误的，我走错了路

Answer 1

您应该查看自定义区域的方式，由 Brian Mann 在backbonerails.com

描述

所以这个想法如下：

1）在应用中使用特殊类定义一个区域，我们称之为DialogRegion

regions: {
    dialogs: {
        selector: '#dialogs',
        regionClass: DialogRegion
    }
}

2）如下所示扩展DialogRegion。我使用了Bootstrap模态API，请期待

var DialogRegion = Marionette.Region.extend({
    onShow: function(view) {
        view.$el.addClass('modal');
        view.$el.modal();

        // add handler to close popup via event
        view.on('before:destroy', function() {
            view.$el.modal('hide');
        });

        //destroy view on popup close
        view.$el.on('hidden.bs.modal', function (e) {
            view.destroy();
        });
    })
})

3）稍后您可以通过渲染dialogs应用区域中的任何视图来渲染模态：

App.dialogs.show( new SomeSuperView({
    model: model
}))

我建议您在Backbonerails上查看教程以澄清这种方式。希望你会发现它很有用

在BackboneJS中重用Bootsrap Modal视图

1 个答案: