Image

dynamically add/remove siblings

1. App.js

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
});

App.IndexController = Ember.Controller.extend({
  items: [{
    id: 1,
    name: 'Pizza'
  },
  {
    id: 2,
    name: 'Nachos'
  },{
    id: 3,
    name: 'Spaghetti'
  }],
  actions: {
    remove: function (item) {
      this.items.removeObject(item);
      for(var i = 0; i < this.items.length; i++) {
         var temp = this.items.objectAt(i);
         Ember.set(temp, "id", (i+1));
      }
    },
    add: function (index) {
      this.items.insertAt(this.items.length, {
        name: 'Hot Dogs',
        id: this.items.length+1,
      });
    },
    summary: function() {
      Ember.$('#sum').text(JSON.stringify(this.items));
    }
  }
});

App.ListContainerComponent = Ember.Component.extend({
  tagName: 'ul',
  items: [],
  actions: {
    onRemove: function (item) {
      this.sendAction('onRemove', item);
    },
    onAdd: function (item) {
      var insertAt = this.items.indexOf(item) + 1;
      this.sendAction('onAdd', insertAt);
    }
  }
});

App.ListItemComponent = Ember.Component.extend({
  tagName: 'li'
});

2. The Markup

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//builds.emberjs.com/tags/v1.10.0/ember-template-compiler.js"></script>
    <script src="//builds.emberjs.com/tags/v1.10.0/ember.debug.js"></script>
  </head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
  <h1>Ember Food</h1>
  {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    {{list-container items=items onRemove='remove' onAdd='add'}}
    <div id="sum" {{action 'summary'}}>Summary</div>
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/list-container">
    {{#each items as |item|}}
      {{#list-item content=item label=item.id }}
        {{item.name}}
        <button {{action 'onAdd' item}}>+</button>
        <button {{action 'onRemove' item}}>-</button>
      {{/list-item}}
    {{/each}}
  </script>
  
  <script type="text/x-handlebars" data-template-name="components/list-item">
    {{label}} 
    {{yield}}
  </script>
</body>
</html>
Advertisements

Javascript

Lempel–Ziv–Welch (LZW) Compression in JS

// Decode LZW-encoded string
function lzwDecode(s) {
        var dict = {};
        var data = (s + "").split("");
        var currChar = data[0];
        var oldPhrase = currChar;
        var out = [currChar];
        var code = 256;
        var phrase;
        for (var i = 1; i < data.length; i++) {
            var currCode = data[i].charCodeAt(0);
            if (currCode < 256) {
                phrase = data[i];
            }
            else {
                phrase = dict[currCode] ? dict[currCode] : (oldPhrase + currChar);
            }
            out.push(phrase);
            currChar = phrase.charAt(0);
            dict = oldPhrase + currChar;
            code++;
            oldPhrase = phrase;
        }
        return out.join("");
}

// Compress a string with LZW
function lzwEncode(s) {
        var dict = {};
        var data = (s + "").split("");
        var out = [];
        var currChar;
        var phrase = data[0];
        var code = 256;
        var i, l;
        for (i = 1, l = data.length; i < l; i++) {
            currChar = data[i];
            if (dict[phrase + currChar] != null) {
                phrase += currChar;
            }
            else {
                out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
                dict[phrase + currChar] = code;
                code++;
                phrase = currChar;
            }
        }
        out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
        for (i = 0, l = out.length; i < l; i++) {
            out[i] = String.fromCharCode(out[i]);
        }
        return out.join("");
}