{"title":"Views","description":"","section":"guides","version":"v1.5","path":"guides/views","canonical_url":"https://amberframework.org/docs/v1.5/guides/views","markdown_url":"https://amberframework.org/docs/v1.5/guides/views.md","inherited":true,"content_markdown":"# Views\n\n## Working with Views\n\nViews are rendered with the amber `render` macro, which uses [Kilt](http://github.com/jeromegn/kilt). Kilt itself supports 4 templating languages (`slang` `ecr`, `mustache`, and `temel`), of which currently Amber fully supports only `slang` and `ecr`. (Kilt will work with `mustache` and `temel` as well, but they haven't been tested in amber, so your experience may vary.)\n\nKilt automatically selects the templating engine based on the extension of the file being read (e.g. `index.ecr` will be rendered with the ECR engine).\n\n[Amber Generators](https://docs.amberframework.org/amber/cli/generate) support `slang` and `ecr` templates using the `-t` option when creating a new project.\n\n* **Slang** — To learn slang, please refer to Slang's [official documentation](https://github.com/jeromegn/slang#syntax). For more examples, Ruby's [slim-lang](http://slim-lang.com) is almost identical to slang.\n* **ECR \\(Embedded Crystal\\)** — To learn ECR, please see Crystal's [ECR module documentation](https://crystal-lang.org/api/latest/ECR.html).\n\n## Rendering Content\n\nIn most cases, the `Controller::Base#render` method does the heavy lifting of rendering your application's content for use by a browser. There are a variety of ways to customize the behavior of render. You can render the default view for an Amber template, or a specific template, or a file, or inline code, or nothing at all.\n\n### Rendering an Action's View\n\nIf you want to render the view that corresponds to a different template within the same controller, you can use render with the name of the view:\n\n```crystal\ndef update\n  @post = Post.find(params[:id])\n  if @post.update(post_params)\n    redirect_to(@post)\n  else\n    render \"edit.slang\"\n  end\nend\n```\n\n### Rendering an Action's Template from Another Controller\n\nIf you want to render a template from an entirely different controller from the one that contains the action code, You can accomplish that with `render`, which accepts the full path \\(relative to `src/views`\\) of the template to render.\n\nFor example, if you're running code in an AdminPostController that lives in `src/controllers/admin`, you can render the results of an action to a template in `src/views/admin/products` this way:\n\n```crystal\nrender \"show.slang\", path: \"views/products\"\n```\n\n### Ways to render\n\n```crystal\nrender \"index.slang\" path: \"views/admin/books\"\nrender \"show.slang\", layout: \"new_layout.slang\")\nrender \"edit.html.erb\" path: \"books\"\nrender partial: \"_form.slang\"\n```\n\n### The :template Option\n\nThis is the view template you would like to render, this could be of `slang`, `ecr`, `mustache`, or `temel`\n\n```crystal\nrender template: \"edit.ecr\"\nrender template: \"edit.html.ecr\"\nrender template: \"edit.html.slang\"\n```\n\n### The :layout Option\n\nWith most of the options to render, the rendered content is displayed as part of the current layout. You'll learn more about layouts and how to use them later in this guide.\n\nYou can use the :layout option to tell Amber to use a specific file as the layout for the current action:\n\n```crystal\nrender(\"show.slang\", layout: \"new_layout.slang\")\n```\n\nYou can also tell Amber to render with no layout at all:\n\n```crystal\nrender(\"show.slang\", layout: false)\n```\n\n#### Examples\n\nThe render method is configured to look in the \"src/views\" path to keep the controllers simple. You may also render with a layout which will look for this in the \"src/views/layouts\" directory.\n\n```crystal\nclass HomeController < ApplicationController\n  LAYOUT = \"application.slang\"\n\n  def index\n    render \"index.slang\"\n  end\nend\n```\n\nThis will render the `views/home/index.slang` template inside the `views/layouts/application.slang` layout.\n\nAn example `views/home/index.slang`:\n\n```text\ndiv\n  h2 Welcome to Amber Framework!\n  p Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used too but not sacrificing the speed.\n```\n\nAnd the layout `views/layouts/application.slang`:\n\n```text\ndoctype html\nhtml\n  head\n    title Blog using Amber\n    meta charset=\"utf-8\"\n    link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\"\n\n  body\n    .masthead\n      .container\n        nav.nav\n          == render(partial: \"layouts/_nav.slang\")\n    .container\n      .row\n        .col-sm-12.main\n          == content\n\n    script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"\n    script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js\"\n    script src=\"/dist/main.bundle.js\"\n```\n\nThe `content` variable holds the rendered view that will be injected in the layout.\n\n## Layouts\n\n### Finding Layouts\n\nTo find the current layout, Amber first looks for a file in `src/views/layouts` with the same base name as the controller. For example, rendering actions from the PhotosController class will use `src/views/layouts/photos.ecr`. If there is no such controller-specific layout, Amber will use `src/views/layouts/application.html.ecr`.\n\nAmber also provides several ways to more precisely assign specific layouts to individual controllers and actions.\n\n### Specifying Layouts for Controllers\n\nYou can override the default layout conventions in your controllers by using the layout declaration. For example:\n\n```crystal\nclass ProductsController < ApplicationController\n  LAYOUT = \"inventory.slang\"\n  #...\nend\n```\n\n### Passing data from Controllers to Views\n\nAll local variables assigned in the controller action are available in the views. This is because the views are compiled in the same scope as the controller action. There is no copying or passing data between the view and controller like other frameworks. This keeps memory consumption lower and improves performance significantly.\n\n## Using Partials\n\nPartial templates - usually just called \"partials\" - are another device for breaking the rendering process into more manageable chunks. With a partial, you can move the code for rendering a particular piece of a response to its own file.\n\n### Naming Partials\n\nTo render a partial as part of a view, you use the render method within the view:\n\n`<%= render \"menu\" %>`\n\nThis will render a file named `_menu.html.ecr` at that point within the view being rendered. Note the leading underscore character: partials are named with a leading underscore to distinguish them from regular views, even though they are referred to without the underscore. This holds true even when you're pulling in a partial from another folder:\n\n`<%= render \"shared/menu.html.ecr\" %>`\n\nThat code will pull in the partial from `app/views/shared/_menu.html.ecr`.\n\n### Using Partials to Simplify Views\n\nOne way to use partials is to treat them as the equivalent of subroutines: as a way to move details out of a view so that you can grasp what's going on more easily. For example, you might have a view that looked like this:\n\n```markup\n<%= render \"shared/ad_banner\" %>\n<h1>Products</h1>\n<p>Here are a few of our fine products:</p>\n...\n\n<%= render \"shared/footer\" %>\n```\n\nHere, the \\_ad\\_banner.html.ecr and \\_footer.html.ecr partials could contain content that is shared by many pages in your application. You don't need to see the details of these sections when you're concentrating on a particular page."}