页面中断，因为另一个页面所需的javascript变量在当前页面中不存在（Rails 4/javascript）

我有一个active_admin.js文件active admin是我的后台面板的名称，它为我的后台页面加载JavaScript

我已经在其中一个交易表单中添加了自定义JavaScript，它工作得非常完美

问题是，在其他非“交易页面”上，例如：用户的后台页面，我在交易页面中专门使用的变量$hidden_info_modals不存在，因此，我遇到了一个严重的javascript错误，特别是阻止了一些关键功能，如全选

我不想为每个页面创建一个JavaScript文件，因为这个文件是为我的js资产管道中的所有活动amdin文件加载的

我该怎么办

我如何避免在这些变量不存在的页面中生成js错误，同时仍然保留它，因为它在“编辑交易”页面上很有用

我得到的错误是：

这里是active_admin.js：

在非交易页面上无法识别隐藏的信息模式时，生成错误的部分位于该文件的底部：

// generating and collecting each modal types (info, improve shots...) with a loop
var i, s, myStringArray = [ "info_throbber", "improve_shots_throbber" ], len = myStringArray.length;

for (i=0; i<len; ++i) {

(function(index) {

var s = myStringArray[index];
// ... do stuff with s ...

$(function() {
  var $modal_types  = $('select#deal_' + s + '_modal_types') 
    , $li           = $modal_types.parent('li')
    , $ol           = $li.parent('ol')
    , $form         = $modal_types.closest('form')
    , $submit       = $form.find('input[type=submit]')
    , $add_modal    = $('<a href="#">Add Modal</a>')
    , $remove_modal = $('<a href="#">Remove Modal</a>')
    , $hidden_info_modals = $('input[id=deal_' + s + '][type=hidden]')
  ;

  $add_modal.click(function(e) {
    e.preventDefault();

    $(this).closest('li')
      .append($remove_modal.clone(true));
    create_info_modal($li.clone());
  });

  $remove_modal.click(function(e) {
    e.preventDefault();

    $(this).parent('li').remove();
  });

  $submit.click(function(e) {
    var components = JSON.stringify( collect_info_modals() )
    ;

    $ol.find('ol.info_modal').remove();
    $modal_types.remove();

    $hidden_info_modals.val( components );
  });

  var modal_types_change = function() {
    var $el = $(this)
      , $li = $(this).closest('li')
      , id = $(this).val()
      , $components = $li.find('ol.components')
    ;

    $components.remove();

    get_modal_structure(id, $li.find('select') );
  };

  $modal_types.attr({ id: null, name: null });

  $li.remove();

  var create_info_modal = function($modal, modal_type_id) {

    var $select = $modal_types.clone();

    if($modal.find('select').length) { $select = $modal.find('select'); }

    $select.val(modal_type_id); 
    $select.change(modal_types_change);

    $modal.prepend($select);
    $modal.append($add_modal);

    $ol.append($modal);
  };

  var collect_info_modals = function() {
    var $info_modals = $ol.find('ol.components')
      , components   = []
    ;

    $.each($info_modals, function(_, $info_modal) {
      $info_modal    = $($info_modal);

      var info_modal = {}
        , $components  = $info_modal.find('li.component input')
        , modal_id   = $info_modal.parent('li').find('select').val()
      ;

      info_modal['modal_id'] = modal_id;

      $.each($components, function(_, component) {
        component = $(component);

        key = component.attr('name');
        val = component.val();
        info_modal[key] = val;

        component.remove();
      });

      $info_modal.parent('li').remove();
      components.push(info_modal);
    });

    return components;
  };

  function get_modal_structure(id, $select) {
    // Grab modal structure
    var url = '/admin/modal_types/modal_structure?id='+id;

    $.getJSON(url, function(modal_structure) {
      var $ol = $('<ol class="components">');

      modal_structure.forEach(function(component){
        $ol.append(build(component));
      });

      $ol.insertAfter($select);
    });
  };

  function build(component, value) {

    value = value || '';

    var text_maxlength = 300
      , $li    = $('<li class="component string input stringish" />')
      , $label = $('<label>'+component+'</label>')
      , $input = $('<input name="'+component+'" type="text"  aria-required="true" maxlength='+text_maxlength+' value="' + value + '"/>')
    ;

    // validations
    if(component.match(/^text/)) {
      $input.attr('maxlength', text_maxlength);
    }

    $li
      .append($label) // returns the LI NOT THE LABEL
      .append($input);

    return $li;
  };



  (function() {
    var hidden_info_modals = ($hidden_info_modals.val().length) ? $hidden_info_modals.val() : '[]';

    hidden_info_modals = JSON.parse( hidden_info_modals );

      hidden_info_modals.forEach(function(info_modal) {
          var modal_type_id
            , $info_modal = $li.clone(true)
            , $ol = $('<ol class="components">');
        ;

          modal_type_id = info_modal['modal_id'];

          delete info_modal['modal_id'];

          for (var key in info_modal) {
              $ol.append(build(key, info_modal[key]));
            }

          $info_modal.append($ol)
          $info_modal.append($remove_modal.clone(true))
          create_info_modal($info_modal, modal_type_id);
      });
  })();

  create_info_modal($li.clone(true));

  });

  })(i);

};

---

感谢您的帮助。

在调用隐藏模态的逻辑之前，请检查管理变量是否未定义。如果变量类型！='未定义“{//变量已定义}我明白了，没有其他更干净的方法吗？t不觉得可伸缩性很强：如果必须添加'if typeof variable！='未定义的“{//the variable is defined}”适用于并非在所有100页视图中存在的所有变量。如果每个视图中都不存在所有变量，那么就对所有变量执行此操作？这是您的代码兄弟…在查看您的代码后，可能在您的特定情况下，您可以在每个页面上将$hidden_info_modals设置为空白数组，或者您的身份验证系统应该有一些基于排序角色的概念，以便您可以检查该人是否查看页面是否是管理员，如果是，则显示模式。如果仅仅因为管理模式位于数组中就允许它们可见，那么我不会开始讨论安全性，这本身就是一个不同的讨论。每一页的情态动词都不同吗？如果没有，似乎有更好的方法来做你正在尝试的事情。

// generating and collecting each modal types (info, improve shots...) with a loop
var i, s, myStringArray = [ "info_throbber", "improve_shots_throbber" ], len = myStringArray.length;

for (i=0; i<len; ++i) {

(function(index) {

var s = myStringArray[index];
// ... do stuff with s ...

$(function() {
  var $modal_types  = $('select#deal_' + s + '_modal_types') 
    , $li           = $modal_types.parent('li')
    , $ol           = $li.parent('ol')
    , $form         = $modal_types.closest('form')
    , $submit       = $form.find('input[type=submit]')
    , $add_modal    = $('<a href="#">Add Modal</a>')
    , $remove_modal = $('<a href="#">Remove Modal</a>')
    , $hidden_info_modals = $('input[id=deal_' + s + '][type=hidden]')
  ;

  $add_modal.click(function(e) {
    e.preventDefault();

    $(this).closest('li')
      .append($remove_modal.clone(true));
    create_info_modal($li.clone());
  });

  $remove_modal.click(function(e) {
    e.preventDefault();

    $(this).parent('li').remove();
  });

  $submit.click(function(e) {
    var components = JSON.stringify( collect_info_modals() )
    ;

    $ol.find('ol.info_modal').remove();
    $modal_types.remove();

    $hidden_info_modals.val( components );
  });

  var modal_types_change = function() {
    var $el = $(this)
      , $li = $(this).closest('li')
      , id = $(this).val()
      , $components = $li.find('ol.components')
    ;

    $components.remove();

    get_modal_structure(id, $li.find('select') );
  };

  $modal_types.attr({ id: null, name: null });

  $li.remove();

  var create_info_modal = function($modal, modal_type_id) {

    var $select = $modal_types.clone();

    if($modal.find('select').length) { $select = $modal.find('select'); }

    $select.val(modal_type_id); 
    $select.change(modal_types_change);

    $modal.prepend($select);
    $modal.append($add_modal);

    $ol.append($modal);
  };

  var collect_info_modals = function() {
    var $info_modals = $ol.find('ol.components')
      , components   = []
    ;

    $.each($info_modals, function(_, $info_modal) {
      $info_modal    = $($info_modal);

      var info_modal = {}
        , $components  = $info_modal.find('li.component input')
        , modal_id   = $info_modal.parent('li').find('select').val()
      ;

      info_modal['modal_id'] = modal_id;

      $.each($components, function(_, component) {
        component = $(component);

        key = component.attr('name');
        val = component.val();
        info_modal[key] = val;

        component.remove();
      });

      $info_modal.parent('li').remove();
      components.push(info_modal);
    });

    return components;
  };

  function get_modal_structure(id, $select) {
    // Grab modal structure
    var url = '/admin/modal_types/modal_structure?id='+id;

    $.getJSON(url, function(modal_structure) {
      var $ol = $('<ol class="components">');

      modal_structure.forEach(function(component){
        $ol.append(build(component));
      });

      $ol.insertAfter($select);
    });
  };

  function build(component, value) {

    value = value || '';

    var text_maxlength = 300
      , $li    = $('<li class="component string input stringish" />')
      , $label = $('<label>'+component+'</label>')
      , $input = $('<input name="'+component+'" type="text"  aria-required="true" maxlength='+text_maxlength+' value="' + value + '"/>')
    ;

    // validations
    if(component.match(/^text/)) {
      $input.attr('maxlength', text_maxlength);
    }

    $li
      .append($label) // returns the LI NOT THE LABEL
      .append($input);

    return $li;
  };



  (function() {
    var hidden_info_modals = ($hidden_info_modals.val().length) ? $hidden_info_modals.val() : '[]';

    hidden_info_modals = JSON.parse( hidden_info_modals );

      hidden_info_modals.forEach(function(info_modal) {
          var modal_type_id
            , $info_modal = $li.clone(true)
            , $ol = $('<ol class="components">');
        ;

          modal_type_id = info_modal['modal_id'];

          delete info_modal['modal_id'];

          for (var key in info_modal) {
              $ol.append(build(key, info_modal[key]));
            }

          $info_modal.append($ol)
          $info_modal.append($remove_modal.clone(true))
          create_info_modal($info_modal, modal_type_id);
      });
  })();

  create_info_modal($li.clone(true));

  });

  })(i);

};