Rails的JavaScript无法在生产模式下工作

Question

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

我把图标图像HTML到控制台，发现它是正确的，与工具栏中选定的图像组成。我很困惑。哪里不对？

应用程序/资产/ Java脚本/ 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。

应用程序/资产/ Java脚本/控制/用户/地点/ 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 

UPDATE 2：A确定问题出在range.insertNode(node)，因为range.deleteContent()确实删除了选择，并且setFocusBackToText()也可以完成它的工作。

应用程序/资产/ Java脚本/ 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文件。在Rails guide（详见2.1.2）中有详细描述。

在你的目录app/assets/javascripts/control/你应该创建一个名为index.js用（简体）内容的新清单文件：

//= require_tree . 

然后在您的application.js：

//= require control 

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

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