Как написать haml-код для соответствующего javascript?

Question

Вот haml, который я создал из html. Но это, похоже, не дает выхода. Пожалуйста, помогите мне узнать об ошибке. Может быть, я собираюсь куда-то не так с синтаксисом или не получаю, что помещать в индексный раздел haml.

#!/usr/bin/env ruby 
require 'rubygems' 
require 'sinatra' 
require 'haml' 

get '/' do 
    haml :index 
end 

__END__ 
@@ layout 
%html 
    %head 

%meta{:charset => "utf-8"}/ 
:css 
    body { 
    font: 10px sans-serif; 
    } 

    .axis path, 
    .axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
    } 

    .x.axis path { 
    display: none; 
    } 

    .line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
    } 

%body 
    %script{:src => "http://d3js.org/d3.v3.js"} 
    :javascript 
    var margin = {top: 20, right: 80, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var x = d3.scale.linear() 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var color = d3.scale.category10(); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var line = d3.svg.line() 
     .interpolate("basis") 
     .x(function(d) { return x(d.ID); }) 
     .y(function(d) { return y(d.temperature); }); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    d3.tsv("pckt_thru.tsv", function(error, data) { 
     color.domain(d3.keys(data[0]).filter(function(key) { return key !== "ID"; })); 

     data.forEach(function(d) { 
     d.ID = +d.ID; 
     }); 

     var cities = color.domain().map(function(name) { 
     return { 
      name: name, 
      values: data.map(function(d) { 
      return {ID: d.ID, temperature: +d[name]}; 
      }) 
     }; 
     }); 

     x.domain(d3.extent(data, function(d) { return d.ID; })); 

     y.domain([ 
     d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }), 
     d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); }) 
     ]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("VALUES"); 

     var city = svg.selectAll(".city") 
      .data(cities) 
     .enter().append("g") 
      .attr("class", "city"); 

     city.append("path") 
      .attr("class", "line") 
      .attr("d", function(d) { return line(d.values); }) 
      .style("stroke", function(d) { return color(d.name); }); 

     city.append("text") 
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
      .attr("transform", function(d) { return "translate(" + x(d.value.ID) + "," + y(d.value.temperature) + ")"; }) 
      .attr("x", 3) 
      .attr("dy", ".35em") 
      .text(function(d) { return d.name; }); 
    }); 
    =yield 

@@ index 
#header 
    %h1 Graph using Sinatra 

Answer 1

Вы упускаете все % подписывает начало элементов, например, html должно быть %html. См. the tutorial. Надеюсь, это поможет.

Answer 2

Если это точный источник и никаких опечаток.

У вас не хватает % на тегах

%html # not html 

Ваш вложенности кажется неверным

%html 
%meta 
    %body 

%html  
    %head 
    %meta 
    %body 

Попробуйте запустить исходный HTML/Еврорадио через http://html2haml.heroku.com. Это может помочь вам начать работу, если вы вообще не знаете HAML.