CanJS - Other Examples

canjs

https://github.com/retro/Tonfa.js
https://github.com/retro/Tonfa.js/blob/master/tonfa.js

http://bitovi-components.github.io/bit-c3/index.html

Example 1:

// HTML:
<div class="header">
    <h1>CanJS jQuery Template</h1>
    <p>
    This template includes jQuery, CanJS and all of its plugins. 
    Use it as a starting point when you are submitting a question to 
    <a href="https://twitter.com/#!/canjs" target="_blank">Twitter</a>, 
    the <a href="https://forum.javascriptmvc.com/#Forum/canjs" target="_blank">forums</a>
     or IRC.
    </p>
    <p>Don't want jQuery? Here are links to templates for other libraries:<br>
        <a href="http://jsfiddle.net/donejs/9x96n/">Dojo</a> |        
        <a href="http://jsfiddle.net/donejs/w6m73/">YUI</a> | 
        <a href="http://jsfiddle.net/donejs/mnNJX/">Mootools</a> |  
        <a href="http://jsfiddle.net/donejs/7Yaxk/">Zepto</a>        
    </p>
</div>

<!-- YOUR CODE HERE -->
<div id="content"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/mustache">
    <h2>CanJS component example</h2>
    <click-counter></click-counter>
</script>

// JavaScript:
var Component = can.Component.extend({
    tag: 'click-counter',
    template: '<a href="javascript://" can-click="updateCount">' +
            'Click Me</a>' +
            '<p id="msg">Clicked {{count}} times</p>',
    scope: {
        count: 0,
        updateCount: function() {
            this.attr('count', this.attr('count') + 1);
        }
    }
});

$('#content').html(can.view('main-template', {}));

Example 2:

// HTML:

<div id="out"></div>
<script id="app" type="text/stache">
    <my-mmy>
        {{#if makes.isResolved}}
            <select can-value="makeId">
                {{^makeId}}
                    <option value=''>Select a Make</option>
                {{/makeId}}
                {{#each makes}}
                    <option value="{{id}}">{{name}}</option>
                {{/each}}
            </select>
        {{else}}
            <select disabled><option>Loading Makes</option></select>
        {{/if}}

        {{#if models}}
            {{#if models.isResolved}}
                <select can-value="modelId">
                    {{^modelId}}
                        <option value=''>Select a Model</option>
                    {{/modelId}}
                    {{#each models}}
                        <option value="{{id}}">{{name}}</option>
                    {{/each}}
                </select>
            {{else}}
                <select disabled><option>Loading Models</option></select>
            {{/if}}
        {{else}}
            <select disabled><option>Models</option></select>
        {{/if}}

        {{#if years}}
            <select can-value="year">
                {{^year}}
                    <option value=''>Select a Year</option>
                {{/year}}
                {{#each years}}
                    <option value="{{.}}">{{.}}</option>
                {{/each}}
            </select>
        {{else}}
            <select disabled><option>Years</option></select>
        {{/if}}

        <div>
            {{#each vehicles}}
                <h2>{{name}}</h2>
                <img src="{{thumb}}" width="200px"/>
            {{/each}}
        </div>

    </my-mmy>
</script>

steal("can","can/map/define","can/util/fixture","can/list/promise",
function(){

can.fixture.delay = 1200;

can.fixture({
  "/makes" : can.fixture.store([
    {id: 1, name: "Ford"},
    {id: 2, name: "Nissan"}
  ]).findAll,
  "/models":  can.fixture.store([
    {id: 1, makeId: 1, name: "Mustang", years: [2013, 2014]},
    {id: 2, makeId: 1, name: "Focus", years: [2013, 2014]},
    {id: 3, makeId: 2, name: "Altima", years: [2013, 2014]},
    {id: 4, makeId: 2, name: "Leaf", years: [2013, 2014]},
  ]).findAll,
  "/vehicles": can.fixture.store([
    {id: 1, modelId: 1, year: 2013, name: "2013 Mustang", thumb: "http://mustangsdaily.com/blog/wp-content/uploads/2012/07/01-2013-ford-mustang-gt-review-585x388.jpg"},
    {id: 2, modelId: 1, year: 2014, name: "2014 Mustang", thumb: "http://mustangsdaily.com/blog/wp-content/uploads/2013/03/2014-roush-mustang.jpg"},
    {id: 3, modelId: 2, year: 2013, name: "2013 Focus", thumb: "http://images.newcars.com/images/car-pictures/original/2013-Ford-Focus-Sedan-S-4dr-Sedan-Exterior.png"},
    {id: 4, modelId: 2, year: 2014, name: "2014 Focus", thumb: "http://ipinvite.iperceptions.com/Invitations/survey705/images_V2/top4.jpg"},
    {id: 5, modelId: 3, year: 2013, name: "2013 Altima", thumb: "http://www.blogcdn.com/www.autoblog.com/media/2012/04/04-2013-nissan-altima-1333416664.jpg"},
    {id: 6, modelId: 3, year: 2014, name: "2014 Altima", thumb: "http://www.blogcdn.com/www.autoblog.com/media/2012/04/01-2013-nissan-altima-ny.jpg"},
    {id: 7, modelId: 4, year: 2013, name: "2013 Leaf", thumb: "http://www.blogcdn.com/www.autoblog.com/media/2012/04/01-2013-nissan-altima-ny.jpg"},
    {id: 8, modelId: 4, year: 2014, name: "2014 Leaf", thumb: "http://images.thecarconnection.com/med/2013-nissan-leaf_100414473_m.jpg"},
  ],{year: 'eqeq', name: "i"}).findAll
});

var CarMake = can.Model.extend({
  findAll: "/makes"
},{});
var CarModel = can.Model.extend({
  findAll: "/models"
},{});
var Vehicle = can.Model.extend({
  findAll: "/vehicles"
},{});

var project = new can.Map({
  progress: 1
});

var MMYViewModel = can.Map.extend({
  define:{
    makes: {
      value: new CarMake.List({}),
      serialize: false
    },
    makeId: {
      type: "number",
      remove: function(){
        this.removeAttr("modelId");
      },
      set: function(){
        this.removeAttr("modelId");
      }
    },
    models: {
      get: function(){
        var makeId = this.attr("makeId");
        if( makeId ) {
          return new CarModel.List({makeId: makeId});
        }
      }
    },
    model: {
      get: function(){
        var models = this.attr("models"),
          modelId = this.attr("modelId");
        if(models && models.attr('length') && modelId) {
          var matched = models.filter(function(model){
            return modelId == model.attr("id");
          });
          return matched[0];
        }
      }
    },
    modelId: {
      type: "number",
      remove: function(){
        console.log("remove modelId");
        this.removeAttr("year");
      },
      set: function(){
        this.removeAttr("year");
      }
    },
    years: {
      get: function(){
        var model = this.attr("model");
        return model && model.attr("years");
      }
    },
    year: {
      type: "number"
    },
    vehicles: {
      get: function(){
        var year = this.attr("year"),
          modelId = this.attr("modelId");

        if( modelId !== undefined && year) {
          return new Vehicle.List({modelId: modelId, year: year});
        }
      }
    }
  }
});

var mmy = new MMYViewModel();
can.route.map(mmy);

can.route.ready();

can.Component.extend({
  tag: "my-mmy",
  scope: mmy
});

$("#out").html( can.view("app",{}) );

});

The above example demonstrates having multiple select drop-down list that are dependent on each other.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License