Last active
January 4, 2016 06:08
-
-
Save jayhjkwon/8579459 to your computer and use it in GitHub Desktop.
Browserify configuration for Ember.js using Grunt - blog article code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var $ = require('jquery'); | |
| var handlebars = require('handlebars'); | |
| var Ember = require('ember'); | |
| var files = [{ | |
| id: 'rails-is-omakase', | |
| title: 'Rails is Omakase', | |
| author: 'D2H', | |
| contents: 'There are lots of a la carte software environments in this wor' | |
| }, { | |
| id: 'why-ruby', | |
| title: 'Why Ruby?', | |
| author: 'CodingHorror', | |
| contents: 'I have been a Microsoft developer for decades now.' | |
| }]; | |
| files.forEach(function(file){ | |
| files[file.id] = file; | |
| }); | |
| App = Ember.Application.create(); | |
| App.Router.map(function(){ | |
| this.resource('files', function(){ | |
| this.route('detail', { path: '/:file_id' }); | |
| this.route('edit', { path: '/edit/:file_id' }); | |
| this.route('new', { path: '/new'}); | |
| }); | |
| }); | |
| App.ApplicationController = Ember.Controller.extend({ | |
| init: function() { | |
| this.set('name', localStorage.appName); | |
| }, | |
| actions: { | |
| saveName: function(value) { | |
| localStorage.appName = value; | |
| } | |
| } | |
| }); | |
| App.FilesRoute = Ember.Route.extend({ | |
| model: function(){ | |
| return files; | |
| } | |
| }); | |
| App.FilesDetailRoute = Ember.Route.extend({ | |
| model: function(params) { | |
| return files[params.file_id]; | |
| } | |
| }); | |
| App.FilesEditRoute = Ember.Route.extend({ | |
| model: function(params) { | |
| var file = files[params.file_id]; | |
| return file; | |
| }, | |
| setupController: function(controller, model) { | |
| controller.set('model', model); | |
| } | |
| }); | |
| App.FilesNewRoute = Ember.Route.extend({ | |
| model: function() { | |
| return {}; | |
| } | |
| }); | |
| App.FilesNewController = Ember.Controller.extend({ | |
| actions: { | |
| addFile: function() { | |
| files.pushObject({ | |
| id: this.get('title'), | |
| title: this.get('title'), | |
| author: this.get('author'), | |
| contents: this.get('contents') | |
| }); | |
| } | |
| } | |
| }); | |
| App.FilesEditController = Ember.ObjectController.extend({ | |
| company: 'GistCamp', | |
| actions: { | |
| editFile: function(file) { | |
| files.pushObject({ | |
| id: this.get('title'), | |
| title: this.get('title'), | |
| author: this.get('author'), | |
| contents: this.get('contents') | |
| }); | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = function (grunt) { | |
| grunt.initConfig({ | |
| pkg: grunt.file.readJSON('package.json'), | |
| browserify: { | |
| dist: { | |
| files: { | |
| 'app.min.js': ['app.js'], | |
| }, | |
| options: { | |
| debug: true, | |
| shim: { | |
| jquery: { | |
| path: 'bower_components/jquery/jquery.js', | |
| exports: '$' | |
| }, | |
| handlebars: { | |
| path: 'bower_components/handlebars/handlebars.js', | |
| exports: 'Handlebars' | |
| }, | |
| ember: { | |
| path: 'bower_components/ember/ember.js', | |
| exports: 'Ember', | |
| depends: { | |
| handlebars: 'Handlebars', | |
| jquery: '$' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| grunt.loadNpmTasks('grunt-browserify'); | |
| grunt.registerTask('default', ['browserify']); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ember Test</title> | |
| <link rel="stylesheet" type="text/css" | |
| href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css"> | |
| <style> | |
| a.active { | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/x-handlebars" > | |
| <p>{{input type="text" value=name action="saveName"}}</p> | |
| <h1>Markdown files by {{name}}</h1> | |
| <h3>{{#link-to 'index'}}Home{{/link-to}}</h3> | |
| <h3>{{#link-to 'files'}}Files{{/link-to}}</h3> | |
| {{#link-to 'files.new'}}New File{{/link-to}} | |
| {{outlet}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="files"> | |
| <div class="container-fluid"> | |
| <div class="row-fluid"> | |
| <div class="span3"> | |
| <table class="table"> | |
| {{#each file in model}} | |
| <tr><td> | |
| {{#link-to 'files.detail' file}} | |
| {{file.title}} by {{file.author}} | |
| {{/link-to}} | |
| {{#link-to 'files.edit' file}} | |
| <span class="btn">Edit</span> | |
| {{/link-to}} | |
| </td></tr> | |
| {{/each}} | |
| </table> | |
| </div> | |
| <div class="span9 well"> | |
| {{outlet}} | |
| </div> | |
| </div> | |
| </div> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="files/detail"> | |
| <h2>{{title}}</h2> | |
| <h3>by {{author}}</h3> | |
| <div> | |
| {{contents}} | |
| </div> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="files/new"> | |
| {{partial 'files/form'}} | |
| <button class="btn" {{action 'addFile'}}>Save</button> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="files/edit"> | |
| <h3>{{company}}</h3> | |
| {{partial 'files/form'}} | |
| <button class="btn" {{action 'editFile' this}}>Save</button> {{! editFile action will just add file :) }} | |
| <h2>{{model.title}}</h2> | |
| <h3>by {{author}}</h3> | |
| <div> | |
| {{contents}} | |
| </div> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="files/_form"> | |
| <p><label for="title">Title</label> {{input type="text" id="title" value=title}}</p> | |
| <p><label for="author">Author</label> {{input type="text" id="author" value=author}}</p> | |
| <p><label for="contents">Contents</label> {{textarea type="text" id="contents" value=contents}}</p> | |
| </script> | |
| <script type="text/javascript" src="app.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "ember-test", | |
| "version": "0.0.0", | |
| "main": "app.js", | |
| "dependencies": { | |
| "browserify": "~3.24.1" | |
| }, | |
| "devDependencies": { | |
| "grunt": "~0.4.2", | |
| "grunt-browserify": "~1.3.0" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment