Question

我正在尝试使用bootstrap模式打开一个模态窗口来编辑骨干模型。一切似乎都是正确的，直到我第二次尝试同样的事情。单击模态按钮后，每个先前打开的模态都会收到一个事件（如果先前的模态是使用关闭/取消按钮关闭的话，则无关紧要。）

此行为与此问题中显示的相同：https://github.com/twitter/bootstrap/issues/6828但我无法将解决方案推断为我的代码。

这是我对bootstrap和backbone的第一种方法，我想我误解了一些东西。我正在向国家展示一张桌子。每行以2个按钮结束（编辑和删除）。当您单击其中一个按钮时，（单个）国家/地区视图捕获事件，在dom树中包含模式并显示它（事件“click .editar”）：

    var PaisModelView = Backbone.View.extend({

    tagName: 'tr',
    template: null,
    editarPaisView: null,
    editarPaisTemplate: null,

    // Eventos
    events: {
        'click .editar' : 'editar'
    },

    // Inicializar
    initialize: function(options) {
        this.model = options.model;
        this.template = options.template;
        this.editarPaisTemplate = options.editarPaisTemplate;
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    // Renderizar
    render: function(item) {
        if ($('#editarPais') != null) {
            $('#editarPais').modal('hide');
        }
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },

editar: function(item) {
    item.preventDefault();
            // creates the view
    this.editarPaisView = new EditarPaisView({
        editarPaisTemplate : this.editarPaisTemplate, 
        pais : this.model
    });
            // creates the modal window
    $("#body").append(this.editarPaisView.render().el);
            // opens the modal window
    $('#editarPais').modal('show');
},

    close:function () {
        alert('Not implemented');
    }
});

我对国家/地区型号版本使用单独的视图：

var EditarPaisView = Backbone.View.extend({
    // Elemento html
    el: $('#mensajes'),
    template: null,
    pais: null,

    // Eventos
    events: {
        'click .confirmarEditar' : 'modificar',
    },


    initialize: function(options) {
        this.template = options.editarPaisTemplate;
        this.pais = options.pais;
    },
    render: function() {
        $(this.el).html(this.template({pais:this.pais}));       
        return this;
    },

    modificar: function(item){
        item.preventDefault();

        var nombrePaisEditado = document.getElementById("nombrePais").value;
        var codigoPaisEditado = document.getElementById("codigoPais").value;
        var valorPaisEditado = document.getElementById("valorPais").value;      

        this.pais.save({
                nombrePais: nombrePaisEditado,
                codigoPais: codigoPaisEditado,
                valorPais: valorPaisEditado
            },{
                success: function(){
                    console.log('Actualizado el país');
                },
                error: function() {
                    alert('Se ha producido un error durante la actualización del país');
                },
                wait: true,
                async: true
            });
    }
});

因此，当您单击模式中具有“确认标志”类别的按钮时，将保存国家/地区模型。

每个视图的html代码都在一个单独的模板文件中。这个是针对国家模式的：

<td><%= nombrePais %></td>
<td style="text-align: center;"><%= codigoPais %></td>
<td style="text-align: right;"><%= valorPais %></td>
<td style="text-align: center;">
    <a href="#editarPais" role="button" class="btn btn-mini editar" id="editar_<%=idPais%>"><i class="icon-edit"></i>Editar</a>
</td>
<td style="text-align: center;">
    <a href="#eliminarPais" role="button" class="btn btn-mini eliminar" id="eliminar_<%=idPais%>"
            data-toggle="modal"><i class="icon-trash"></i>Eliminar</a>
</td>

这个是针对国家模特版的形式：

<div id="editarPais" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editarPaisLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="eliminarPaisLabel">Editar País</h3>
  </div>
  <div class="modal-body">
    <input type="hidden" id="idPais" value="<%= pais.get('idPais') %>">
    <p>                                 
        Nombre: <input type="text" id="nombrePais" maxlength="64" value="<%= pais.get('nombrePais') %>"/> <br>
        Código: <input type="text" id="codigoPais" maxlength="2" value="<%= pais.get('codigoPais') %>"/> <br>
        Valor:  <input type="text" id="valorPais" value="<%= pais.get('valorPais') %>"/> <br>       
    </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
    <button class="btn btn-primary confirmarEditar">Editar</button>
  </div>
</div>

最后，这些是我正在使用的相关库：

<script src="${contextPath}/static/lib/jquery-1.7.1.js"></script>
<script src="${contextPath}/static/lib/underscore.js"></script>
<script src="${contextPath}/static/lib/backbone-0.9.2.js"></script>
<script src="${contextPath}/static/lib/bootstrap.js"></script>

任何帮助都将非常感谢!!

Answer 1

我认为这可能就像没有重新创建模态div一样简单。试试这个：

editar: function(item) {
    item.preventDefault();
    // creates the view
    this.editarPaisView = new EditarPaisView({
        editarPaisTemplate : this.editarPaisTemplate, 
        pais : this.model
    });

    // creates or updates the modal window
    if ($('#editarPais').length > 0) {
        $("#editarPais").replaceWith(this.editarPaisView.render().el);
    } else {
        $("#body").append(this.editarPaisView.render().el);
    }

    // opens the modal window
    $('#editarPais').modal('show');
},

bootstrap.js模态按钮每个先前打开的模态触发一次单击

1 个答案: