Rails javascript 在生产模式下不起作用

Question

我有一个对象，它显示图标选择工具栏，就像在 Skype 中一样。图标图像显示正确，但是当我在生产模式下单击图标时，所选图标不会出现在文本中。

我将图标图像 html 放到控制台，发现它与工具栏中所选图像的组成完全一样。我很困惑。怎么了？

app/assets/javascripts/emoticons.js

function EmoticonsToolbar(jquery_element){
  var e = jquery_element;
  var top  = e.offset().top;  // store toolbar button initial position
  var left = e.offset().left;
  var onIconClick_callback;   // method to insert icon image html in text

  this.hide = function(){
    e.hide();
  };

  // icon click event handler
  this.onIconClick = function(eventObject){
    e.hide();
    var html = $(eventObject.target).parent().html().replace(/\n\s+|\s+\n/g, '');




    console.log(html);
    // html here: '<img title="ru.emoticons. " src="/assets/emoticons/24x24/02-72977ee3c26c7946176e85da16a13c98.png">'
    // that url returnes the image if being typed in address bar




    onIconClick_callback(html);
    eventObject.stopPropagation();
    };

  // show icon selection toolbar above the editor button
  this.attach_to = function(element, callback){
    onIconClick_callback = callback;
    var newTop  = element.offset().top  - top  - 10 - e.height();
    var newLeft = element.offset().left - left + 10;
    e.css({top:newTop, left:newLeft, visibility:'visible'}).show();
    };
};

这里是一个编辑器面板按钮“插入表情”，它显示表情工具栏，并处理所选图标图像的html。

app/assets/javascripts/control/user/sites/pages.js

function nicEditorEmoticonButton(){   
  var self;
  this.init = function(){
    self = this;
  };

  // Search text input and set focus on it
  var setFocusBackToText = function(){
    $(self.elm).closest('div.widget').find('div.nicEdit-main').focus();
  };

  this.mouseClick = function(eventObject) {
    var paste_icon_html = function(html){
      // create a DOM node from the given html
      var div = document.createElement('div');
      div.innerHTML = html;
      var node = div.childNodes[0];

      // get selection if any, insert html as a Node
      var range = se.getRng();
      range.deleteContents();
      range.insertNode(node);
      range.setEndAfter(node);
      range.setStartAfter(node);
      setFocusBackToText();
    };

    // get nicEdit selected instance - se
    var se = this.ne.selectedInstance;
    if(se){
      emoticonsToolbar.attach_to($(this.button), paste_icon_html);
    } else {
      // no editor selected, so let select this one
      setFocusBackToText();
    }
  };
};


var emoticonButtonOptions = {
  buttons : {
    'emoticonToolbar' : {name : __('Emoticon menu bar button'), type : 'nicEditorEmoticonButton'}
  }, iconFiles : {'emoticonToolbar' : '/assets/emoticons/ab.gif'}
};

我确实跑了rake assets:precompile

更新 1：添加了 aplication.js 片段

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_self
//= require_tree ./control
//= require_tree ./popup
//= require_tree ./global
//= require_tree ./lib
//= require hide_on_body_click.js
//= require popup_messages.js
//= require root.js
//= require diaries.js
//= require emoticons.js

//... and plenty of code below

更新 2：我确定问题出在 range.insertNode(node)，因为 range.deleteContent() 确实删除了选择，而 setFocusBackToText() 也完成了它的工作。

app/assets/javascripts/emoticons.js

  // get selection if any, insert html as a Node
  var range = se.getRng();
  range.deleteContents();
  range.insertNode(node); // <- doesn't work in production environment
  range.setEndAfter(node);
  range.setStartAfter(node);
  setFocusBackToText();

Answer 1

我建议使用 index.js file 。在这个Rails guide中有详细描述（查找2.1.2）。

在您的目录app/assets/javascripts/control/ 中，您应该创建一个名为index.js 的新清单文件，其中包含（简化的）内容：

//= require_tree .

然后在你的application.js：

//= require control

（注意 index.js 文件的目录名称应与application.js 中所需的库匹配）。

这样您可以嵌套您的资产库并减少主清单文件中的行数。