Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<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, shrink-to-fit=no">
​
    <title>Backbone.Marionette.Export 2.1.6, demo (AMD)</title>
    <meta name="description" content="Backbone.Marionette.Export 2.1.6, demo (AMD)">
​
    <!-- ATTN Foundation loaded without JS - stay clear of JS-driven widgets, or add the JS setup -->
    <!--
        ATTN jQuery 1.x is used here, making the demo compatible with oldIE. As a side effect,
        Foundation 5 JS can't be used reliably (requires jQuery 2.x). Stay clear, or switch to
        jQuery 2.x.
    -->
    <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.marionette.export/2.1.6/demo/common.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/hashchange/backbone.marionette.export/2.1.6/demo/amd/amd.css">
​
    <!-- Fix HTML5 tags in oldIE and other lacking legacy browsers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
​
    <script id="collection-template" type="text/x-template">
        <div class="row">
            <p>Collection content, passed to a Marionette.CompositeView template:</p>
            <ul></ul>
            <p>There are <%= items.length %> items in the collection. Exported collection methods tell us that the ID of
                the first item is "<%= items.first.id %>", and the ID of the last item is "<%= items.last.id %>".</p>
        </div>
    </script>
​
    <script id="model-template" type="text/x-template">
        <dt>Model with ID <%= id %></dt>
        <dd><%= someMethod %></dd>
        <dd><%= someMethodWithArgs %></dd>
    </script>
​
</head>
<body>
​
    <section id="header">
        <h1 class="row">Backbone.Marionette.Export</h1>
        <h2 class="row">Demo (AMD)</h2>
    </section>
​
    <section id="main">
        <!-- body content here... -->
    </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.marionette.export/2.1.6/demo/amd/jsbin/map-config.js"></script>
    <script src="https://cdn.rawgit.com/hashchange/backbone.marionette.export/2.1.6/demo/amd/rjs/output/parts/vendor.js"></script>
​
</body>
</html>
​
 
​
 
// main.js
​
require( [
​
    'underscore',
    'backbone',
    'marionette',
    'backbone.marionette.export'
​
], function ( _, Backbone ) {
​
    var MarionetteBaseView = Backbone.Marionette.ItemView || Backbone.Marionette.View,    // supporting both Marionette 2 and 3
​
        Model = Backbone.Model.extend( {
            exportable: "someMethod",
​
            onExport: function ( data ) {
                data || (data = {});                                                // jshint ignore:line
                data.someMethodWithArgs = this.someMethodWithArgs( this.cid );
                return data;
            },
            someMethod: function () {
                return "This is the return value of a method call on model <code>" + this.id + "</code>.";
            },
            someMethodWithArgs: function ( arg ) {
                return "This is the return value of a method call with argument <code>" + arg + "</code> on model <code>" + this.id + "</code>.";
            }
        } ),
​
        Collection = Backbone.Collection.extend( {
            exportable: [ "first", "last" ]
        } ),
​
        m1 = new Model( { id: 1  } ),
        m2 = new Model( { id: 2  } ),
        m3 = new Model( { id: 3  } ),
​
        collection = new Collection( [ m1, m2, m3 ] ),
​
        DataView = Backbone.Marionette.CompositeView.extend( {
            childView: MarionetteBaseView.extend( {
                tagName: "li",
                template: "#model-template"
            } ),
            childViewContainer: "ul",
            template: "#collection-template"
        } ),
​
        dataRegion = new Backbone.Marionette.Region( {
            el: "#main"
        } );
​
    dataRegion.show( new DataView( { collection: collection } ) );
} );
​
define("local.main", function(){});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hashchangepro
0viewers