Rails。渲染一个局部不能渲染其中的javascript代码。

Question

在我的Rails 5代码中，我有一个局部在ajax调用成功返回时加载。这个局部有一个div id，它是一个网格，由assets文件中的ExtJS代码加载。第一次加载页面时，所有的UI都能正常渲染，包括ExtJS网格。但之后任何时候，当ajax调用执行时，虽然局部加载，但网格没有加载。Ext.onReady(function()里面的代码不会执行，除非整个页面重新加载。如何改变这种情况？

我的appappviewindex.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>

myappappview_my_partial.html.erb。

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

myappappassetsjavascriptmy_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
        });
});

在我的Rails 5代码中，我有一个在ajax调用成功返回时加载的部分。

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

Answer 1

如果认为这是由于Ext.onReady方法引起的，该方法可能只启动一次。

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

一个简单的解决方法是通过Ext.isReady属性（bool）来检查。

docs.isReady属性。

https:/docs.sencha.comextjs6.2.0classicExt.html#property-isReadyhttps:/docs.sencha.comextjs6.2.0classicExt.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'))