Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Playing with Ember.js

Playing with Ember.js

31回 HTML5とか勉強会

Yuya Saito

July 11, 2012

More Decks by Yuya Saito

Other Decks in Programming


  1. NO Agenda NO Agenda NO Agenda NO Agenda NO Agenda

    Just Get To know Just Get To Know Just Get To Know Just Get To KNOW Just Get To Know Ember.js Ember.js Ember.js Ember.js Ember.js
  2. “Ember is a JavaScript framework for creating ambitious web applications

    that eliminates boilerplate and provides a standard application architecture.” - emberjs.com/documentation
  3. MyApp.president = Ember.Object.create({ name: "Barack Obama" }); MyApp.country = Ember.Object.create({

    // ϓϩύςΟ໊ͷ࠷ޙʹ'Binding'ͱ෇༩͢Δͱ // presidentNameʹόΠϯσΟϯάΛੜ੒͢Δɻ presidentNameBinding: 'MyApp.president.name' }); // Ember͕όΠϯσΟϯάΛղܾͨ͠ޙ... MyApp.country.get('presidentName'); // ݁Ռ: "Barack Obama"
  4. MyApp.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() {

    return this.get('firstName') + ' ' + this.get('lastName'); // ҎԼͷϑϥάʹΑͬͯؔ਺ΛϓϩύςΟͷΑ͏ʹѻ͏ }.property() }); MyApp.president.get('fullName'); // ݁Ռ: "Barack Obama"
  5. <!doctype html> <html> <head> <title>Tweets</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link

    rel="stylesheet" href="styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script> <script src="http://cloud.github.com/downloads/emberjs/ember.js/ ember-0.9.6.min.js"></script> <script src="app.js"></script> </head> <body> <script type="text/x-handlebars"> <div id="frm"> <b>Load Tweets for: </b> </div> <div id="content"> <div id="recent"> <h3>Recent Users</h3> </div> <div id="tweets"> <h3>Tweets</h3> </div> </div> </script> </body> </html>
  6. <body> <script type="text/x-handlebars"> <div id="frm"> <b>Load Tweets for: </b> </div>

    <div id="content"> <div id="recent"> <h3>Recent Users</h3> </div> <div id="tweets"> <h3>Tweets</h3> </div> </div> </script> </body>
  7. App.tweetsController = Em.ArrayController.create({ content: [], username: '', loadTweets: function() {

    var me = this; var username = me.get("username"); alert(username); if ( username ) { var url = 'http://api.twitter.com/1/statuses/ user_timeline.json' url += '?screen_name= %@&callback=?'.fmt(me.get("username")); // push username to recent user array App.recentUsersController.addUser(username); } } }); "QQUXFFUT$POUSPMMFS
  8. App.recentUsersController = Em.ArrayController.create({ content: [], addUser: function(name) { if (

    this.contains(name) ) this.removeObject(name); this.pushObject(name); }, removeUser: function(view){ this.removeObject(view.context); }, searchAgain: function(view){ App.tweetsController.set('username', view.context); App.tweetsController.loadTweets(); }, reverse: function(){ return this.toArray().reverse(); }.property('@each') }); "QQSFDFOU6TFST$POUSPMMFS
  9. <ol> {{#each App.recentUsersController.reverse}} <li> <a href="#" title="view again" {{action "searchAgain"

    target="App.recentUsersController"}} >{{this}}</a> - <a href="#" title="remove" {{action "removeUser" target="App.recentUsersController"}} >X</a> </li> {{/each}} </ol> อଘͨ͠ݕࡧΩʔϫʔυͷදࣔ
  10. $.getJSON(url,function(data){ me.set('content', []); $(data).each(function(index,value){ var t = App.Tweet.create({ avatar: value.user.profile_image_url,

    screen_name: value.user.screen_name, text: value.text, date: value.created_at }); me.pushObject(t); }) }); 5XFFUTΛऔಘ͢Δ"KBY
  11. What IS Ember.js? What Is Ember.js? What is Ember.js? MVC:

    Ember.js MVC: Ember.js MVC: Ember.js features features features Gist of Ember.js Gist of Ember.js Gist of Ember.js
  12. “Ember’s philosophy is that by eliminating trivial choices and making

    the answers conventional, you can focus your energy on non-trivial problems.” - Tom Dale