Как использовать объект, переданный в index.jade в скрипте browserified? - PullRequest
Новая
       20

Как использовать объект, переданный в index.jade в скрипте browserified?

0 голосов
/ 09 марта 2019

Я пробую браузер и столкнулся с проблемой со структурой моего проекта. Я отправляю массив в index.jade через маршрутизацию из index.js. Это, кажется, работает, и в index.jade длина массива отображается: 

extends layout

block content
  h1= title 
  p= spectra.length
  div#cy
  script(src="javascripts/code.js")

Code.js - это ряд классов (ES6, который Babelified), упакованных в browserify Кажется, это работает, пока я не попытаюсь использовать спектры: 

"use strict";
const GraphSpectrum = require("./GraphSpectrum");
let gms = new GraphSpectrum(spectra[0]); 
var cy = window.cy = cytoscape({ //...

ReferenceError: спектры не определены

browserify создает code.js и в конце сгенерированного кода содержит код моего клиента: 

......
},{}],4:[function(require,module,exports){
"use strict";

console.log(spectra.length);
console.log(spectra);

const GraphSpectrum = require("./GraphSpectrum");
const MSSpectrum = require("./MSSpectrum");

let mgfSection = ["BEGIN IONS", "PEPMASS=491.222686767578", "CHARGE=2", "TITLE=491.222686767578_1494.17_scan=6268_2014090922Mix2alkylISW10noEclu,seq={ATNYNAGDR},sup={4}", "SCANS=0", "491.2227\u00092", "128.1677\t34.3", "143.9659    14.8", "145.1864    1063.5", "147.2310  164.8", "148.0274   88.9", "152.2586    32.3", "153.1165    141.1", "155.0703   453.6", "156.2521   121.2", "158.0017   158.1", "162.1551   94.7", "163.1792    69.3"];
let msms = new MSSpectrum();
msms.parseMGFSection(mgfSection);
let gms = new GraphSpectrum(msms);
console.log(gms.nodes);
console.log(gms.getEdges('sequence'));
var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  boxSelectionEnabled: false,
  autounselectify: true,
  style: [{
    selector: 'node',
    css: {
      'content': 'data(id)',
      'text-valign': 'center',
      'text-halign': 'center'
    }
  }, {
    selector: '$node > node',
    css: {
      'padding-top': '1px',
      'padding-left': '1px',
      'padding-bottom': '1px',
      'padding-right': '1px',
      'text-valign': 'top',
      'text-halign': 'center',
      'background-color': '#bbb'
    }
  }, {
    selector: 'edge',
    css: {
      'curve-style': 'bezier',
      'target-arrow-shape': 'triangle'
    }
  }, {
    selector: ':selected',
    css: {
      'background-color': 'black',
      'line-color': 'black',
      'target-arrow-color': 'black',
      'source-arrow-color': 'black'
    }
  }],
  elements: {
    nodes: gms.nodes,
    edges: gms.getEdges('sequence') 
  },
  layout: {
    name: 'preset',
    padding: 5
  }
}); 

},{"./GraphSpectrum":1,"./MSSpectrum":3}]},{},[4]);

Код работает и результаты отображаются при удалении ссылки на спектры. Как мне получить доступ к глобальной переменной, доступной в pug в этом разделе кода?

Чего мне не хватает?

Спасибо, Jens

1 Ответ

0 голосов
/ 10 марта 2019

Что я упустил из виду, так это то, что переменные, доступные для Jade / Pug, недоступны для клиентских скриптов в браузере.Они должны быть переданы в первую очередь.Как это сделать, описано здесь: Переменные, глобальные объекты и console.log в нефрите

В моем случае я добавил: 

script(type="text/javascript")!= "var clientSpectra = " + JSON.stringify(spectra)

кindex.jade

...