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'))