Rails：渲染部分不会渲染其中的 javascript 代码

Question

在我的 Rails 5 代码中，我有一个部分加载成功返回 ajax 调用。 此部分有一个 div id，用于由资产文件中的 ExtJS 代码加载的网格。 第一次加载页面时，所有 UI 都呈现良好，包括 ExtJS 网格。 但在那之后的任何时候，当 ajax 调用执行时，虽然部分加载，但网格不会加载。 除非重新加载整个页面，否则 Ext.onReady(function() 中的代码不会执行。我该如何更改？

myapp/app/view/index.html.erb

<div id="test">                   
  <%= render partial: 'my_partial' %>
 </div> 

<script type="text/javascript">
  function someAjax(){
    $.ajax({
       url: '/mycontroller/my_data',                     
       success: function(result) {
          $('#test').html(result);          
        }                       
    }); 

  }  
</script>

myapp/app/view/_my_partial.html.erb

<li>                     
    <span>Some data </span><span><%= @value1 %></span> 
  </li>
<br>
<div>
  <div id="my-js-code"></div>
</div>

myapp/app/assets/javascript/my_grid_code.js.erb

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': '/ext/ux'
    }
});

Ext.onReady(function(){
if(Ext.get('my-js-code')){
//code that creates a grid



Ext.define('mymodel', {
        extend: 'Ext.data.Model',
        fields: ['mycol1','mycol2']
    });
var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'mymodel',
        pageSize: 10,
        proxy: {
            type: 'rest',
            format: 'json',
            url: '/mycontroller/list',                
           reader: {
                type: 'json',
                root: ‘result’,
                totalProperty: 'totalCount'
        }
    }
});
    gridColumns = [{
            header: ‘My Col1’,            
            dataIndex: 'my_col1’        
    },{
            header: ‘My Col2’,
            dataIndex: 'my_col2’        
    }];

var grid = Ext.create('Ext.grid.Panel', {
            renderTo: 'my-js-code',
            store: store,                        
            columns: gridColumns
        });
});

myapp/app/controllers/my_controller.rb

def my_data
  respond_to do |format|
      format.html { render :partial => "my_partial" }  
  end 
end

Answer 1

如果认为这是由可能只触发一次的 Ext.onReady 方法引起的。

第二次，extJS 框架已经加载，因此回调不会被调用。

一个简单的解决方法是通过 Ext.isReady 属性 (bool) 检查它。

文档：

https://docs.sencha.com/extjs/6.2.0/classic/Ext.html#property-isReady https://docs.sencha.com/extjs/6.2.0/classic/Ext.html#method-onReady

---

Ext.Loader.setConfig({
  enabled: true,
  paths: {
    'Ext.ux': '/ext/ux'
  }
})

var renderGrid = function (target) {
  if (Ext.get(target)) {
    var grid = Ext.create('Ext.grid.Panel', {
      renderTo: target,
      store: Ext.create('Ext.data.Store', {
        autoLoad: true,
        pageSize: 10,
        proxy: {
          type: 'rest',
          format: 'json',
          url: '/mycontroller/list',
          reader: {
            type: 'json',
            root: 'result',
            totalProperty: 'totalCount'
          }
        }
      }),
      columns: [
        {
          header: 'My Col1',
          dataIndex: 'my_col1'
        }, {
          header: 'My Col2',
          dataIndex: 'my_col2'
        }]
    })
  }
}

Ext.isReady ? renderGrid('my-js-code') : Ext.onReady(renderGrid('my-js-code'))