Code Monkey home page Code Monkey logo

ember-inline-component's Introduction

ember-inline-component

Blueprint Addon for Ember Components that have inline templates.

NPM Build Status Ember Observer Score Ember Version

Uses the wonderful ember-cli-htmlbars-inline-precompile addon behind the scenes.

Install

ember install ember-inline-component

Usage

ember g inline-component my-component
ember g inline-component --pod another-one

This creates a component file that looks like:

import Component from '@ember/component';
import hbs from 'htmlbars-inline-precompile';

export default Component.extend({
  layout: hbs`{{yield}}`
});

So you can build components with the template inside the source itself, skipping the template.hbs file. Great for prototyping, and fast development. Can always be moved to a separate template file if your template gets big.

Also works when generating inside an addon.

Linting

Note that the excellent ember-template-lint project is extremely helpful for finding lint errors in handlebars files, but will not examine template literals natively in .js files. However, it is possible to use eslint along with this eslint plugin to provide linting for your handlebars template literals within your .js files.

Contributing

If you see any issues, please submit an Issue, or a Pull Request if you can.

See CONTRIBUTING.md.

License

This project is licensed under the MIT License.

ember-inline-component's People

Contributors

ember-tomster avatar psbanka avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

psbanka

ember-inline-component's Issues

Loading Templates from DB

I am trying to use a Template passed into the component by its parent.
However, this.set("layout", hbs${template}); results in a build Error.
Is there any way to use the ember-inline-component for dynamic templates?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.