cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Backbone.Select 1.5.5: Basic demo, with model sharing (AMD)</title>
    <meta name="description" content="Backbone.Select 1.5.5: Basic demo, with model sharing (AMD)">

    <!-- ATTN Foundation loaded without JS - stay clear of JS-driven widgets, or add the JS setup -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css">

    <link rel="stylesheet" href="https://cdn.rawgit.com/hashchange/backbone.select/1.5.5/demo/common.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/hashchange/backbone.select/1.5.5/demo/amd/basic.css">
</head>
<body>

    <section id="header">
        <h1 class="row">Backbone.Select</h1>
        <h2 class="row">Basic demo, with model sharing (AMD)</h2>
    </section>

    <section>

        <div class="row">
            <p>Select.One collection: Numbers</p>
        </div>
        <div class="row">
            <ul id="numList" class="small-block-grid-3 medium-block-grid-6 large-block-grid-6 list"></ul>
        </div>

        <div class="row">
            <p>Select.One collection: Alpha, LC</p>
        </div>
        <div class="row">
            <ul id="alphaLcList" class="small-block-grid-3 medium-block-grid-6 large-block-grid-6 list"></ul>
        </div>

        <div class="row">
            <p>Select.One collection: Alpha, UC</p>
        </div>
        <div class="row">
            <ul id="alphaUcList" class="small-block-grid-3 medium-block-grid-6 large-block-grid-6 list"></ul>
        </div>

        <div class="row">
            <p>Select.One collection: First item of each of the other Select.One collections<br>
                <small>Because these items are combined in a Select.One collection, the other collections are affected, too. You can select the first item in one collection at a time, not in multiple ones.</small>
            </p>
        </div>
        <div class="row">
            <ul id="firstList" class="small-block-grid-3 medium-block-grid-6 large-block-grid-6 list"></ul>
        </div>

        <div class="row">
            <p>Select.Many collection: All items combined</p>
        </div>
        <div class="row">
            <ul id="multiList" class="small-block-grid-3 medium-block-grid-6 large-block-grid-6 list"></ul>

        </div>

    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.js"></script>
    <script src="https://cdn.rawgit.com/hashchange/backbone.select/1.5.5/demo/amd/rjs/output/parts/vendor.js"></script>

</body>
</html>

            
          
!
            
              // basic.js

require( [

    'jquery',
    'underscore',
    'backbone',
    'backbone.select'

], function ( $, _, Backbone ) {

    var Model = Backbone.Model.extend( {
            initialize: function () {
                Backbone.Select.Me.applyTo( this );
            }
        } ),

        SelectOneCollection = Backbone.Collection.extend( {
            initialize: function ( models ) {
                Backbone.Select.One.applyTo( this, models, {enableModelSharing: true} );
            }
        } ),

        SelectManyCollection = Backbone.Collection.extend( {
            initialize: function ( models ) {
                Backbone.Select.Many.applyTo( this, models, {enableModelSharing: true} );
            }
        } ),

        modelCount = 6,
        createModels = function ( count, baseChar ) {
            // Creates an array of models. Their IDs are a single character, based
            // on a base char.
            var i,
                baseCharCode = baseChar.charCodeAt( 0 ),
                models = [];

            for ( i = 0; i < count; i++ ) {
                models.push( new Model( { id: String.fromCharCode( baseCharCode + i ) } ) );
            }

            return models;
        },

        modelsNumeric = createModels( modelCount, "1" ),
        modelsAlphaLC = createModels( modelCount, "a" ),
        modelsAlphaUC = createModels( modelCount, "A" ),

        selectOneNum = new SelectOneCollection( modelsNumeric ),
        selectOneAlphaLC = new SelectOneCollection( modelsAlphaLC ),
        selectOneAlphaUC = new SelectOneCollection( modelsAlphaUC ),
        selectOneFirst = new SelectOneCollection( [
            selectOneNum.first(),
            selectOneAlphaLC.first(),
            selectOneAlphaUC.first()
        ] ),
        selectMany = new SelectManyCollection(
            modelsNumeric.concat( modelsAlphaLC, modelsAlphaUC )
        ),


        ListView = Backbone.View.extend( {
            events: {
                "click .item": "toggleSelected"
            },

            initialize: function ( options ) {
                _.bindAll( this, "toggleSelected", "render" );
                this.collection = options.collection;

                // The view is used for both collection types, Select.One and
                // Select.Many. Because their select:* events differ in their
                // signature, it is easier to listen to the model events, which
                // bubble up to the collection.
                this.listenTo( this.collection, "selected", this.onModelSelect );
                this.listenTo( this.collection, "deselected", this.onModelDeselect );

                this.render();
            },

            getModelEl: function ( modelId ) {
                // Return the DOM node representing the model, as a jQuery object
                return this.$el
                    .find( ".item" )
                    .filter( function () {
                        return $( this ).text() === String( modelId );
                    } );
            },

            toggleSelected: function ( event ) {
                var id = $( event.currentTarget ).text();
                if ( event ) event.preventDefault();
                this.collection.get( id ).toggleSelected();
            },

            onModelSelect: function ( model ) {
                this.getModelEl( model.id ).addClass( "selected" );
            },

            onModelDeselect: function ( model ) {
                this.getModelEl( model.id ).removeClass( "selected" );
            },

            render: function () {
                // Render the collection content
                this.$el.empty();
                this.collection.each( function ( model ) {
                    this.$el.append( '<li class="item"><a href="#">' + model.id + '</a></li>' );
                }, this );

                // Mark up selected elements
                if ( this.collection._pickyType === "Backbone.Select.One" && this.collection.selected ) {

                    this.onModelSelect( this.collection.selected );

                } else if ( this.collection._pickyType === "Backbone.Select.Many" && _.size( this.collection.selected ) ) {

                    _.each( this.collection.selected, function ( model ) {
                        this.onModelSelect( model );
                    }, this );

                }
            }
        } );

    // Initial selection
    selectOneFirst.first().select();

    new ListView( { collection: selectOneNum, el: "#numList" } );
    new ListView( { collection: selectOneAlphaLC, el: "#alphaLcList" } );
    new ListView( { collection: selectOneAlphaUC, el: "#alphaUcList" } );
    new ListView( { collection: selectOneFirst, el: "#firstList" } );
    new ListView( { collection: selectMany, el: "#multiList" } );

} );

define("local.basic", function(){});


            
          
!
999px
Loading ..................

Console