2015-07-29 1 views
0

Я пытаюсь добраться до Hello World с добавлением D3 в приложение Rails, но я не могу получить обычный HTML-код в своем представлении для рендеринга. Я не хочу, чтобы коснуться controller или application.js файл и то, что я сделал, кажется, работает, за исключением рендеринга HTML ...Добавление JavaScript в Rails-приложение - HTML перестает рендеринг

я добавил необходимые JavaScript файлы app/assets/javascripts.

Я обновил config/initializers/assets.rb на:

Rails.application.config.assets.version = '1.0' 
Rails.application.config.assets.precompile += %w(d3.js) 
Rails.application.config.assets.precompile += %w(sankey.js) 
Rails.application.config.assets.precompile += %w(sankeycreate.js) 

Я обновил app/views/layouts/application.html.erb на:

<!DOCTYPE html> 
<html> 
<head> 
    <title>D3app</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    <%= yield(:head) %> 
</head> 
<body> 
    <%= yield(:body) %> 
</body> 
</html> 

Наконец, у меня есть app/views/static_pages/home.html.erb закодировано:

<% content_for :head do %> 
    <%= javascript_include_tag 'd3' %> 
    <%= javascript_include_tag 'sankey' %> 
<% end %> 

<h1>D3 App</h1> 
<p id="chart2"> 

<% content_for :body do %> 
    <%= javascript_include_tag 'sankeycreate' %> 
<% end %> 

Я связывание SVG созданных sankeycreate.js - body бирка. SVG отображает без проблем, и я не вижу никаких ошибок, но элементы <h1>D3 App</h1> и <p id="chart2"> не будут отображаться. Я не могу понять, почему это было бы.

+0

Что в вашем 'js' файле? И вы видели исходный код в браузере. Просто нажмите ctrl + U и посмотрите исходный код, есть ли теги 'h1' и' p'. – Deep

+0

Мой JS-файл содержит код D3, который работает, потому что граф SVG привязывается к тегу body. Я должен был уточнить, h1 и p-тэги не находятся в источнике при загрузке страницы. – jdesilvio

ответ

0

У вас есть два объекта content_for blocks :body и :head, но два тега, которые вы отсутствуете, ни в одном из них. Если вы хотите визуализировать объекты, находящиеся за пределами блоков контента, просто используйте yield в своем макете, поэтому рельсы знают, где это сделать.

<!DOCTYPE html> 
<html> 
<head> 
    <title>D3app</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    <%= yield(:head) %> 
</head> 
<body> 
    <%= yield %> 
    <%= yield(:body) %> 
</body> 
</html> 

http://guides.rubyonrails.org/layouts_and_rendering.html#understanding-yield

Смежные вопросы