Rails: рендеринг партиала не отображает код javascript внутри него - PullRequest
Новая
       94

Rails: рендеринг партиала не отображает код javascript внутри него

0 голосов
/ 07 мая 2020

В моем коде Rails 5 у меня есть партиал, который загружается при успешном возврате вызова ajax. У этого партиала есть идентификатор div, который предназначен для сетки, загружаемой кодом Ext JS в файл ресурсов. При первой загрузке страницы весь пользовательский интерфейс отображается нормально, включая сетку Ext JS. Но в любое время после этого, когда выполняется вызов 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

1 Ответ

0 голосов
/ 07 мая 2020

Если вы думаете, что это вызвано методом Ext.onReady, который может сработать только один раз.

Во второй раз структура ext JS уже загружена, поэтому обратный вызов не будет вызван.

Одним из простых способов исправления может быть проверка с помощью свойства Ext.isReady (bool).

docs:

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 -в готовности 

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