magnet88jp · May 17, 2015 02:19
diff --git a/marionette-compo1.html b/marionette-compo1.html
 <html>
 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.js"></script>

 <script>

 var SingleLink = Marionette.ItemView.extend({
  tagName: "li",
  template: '#itemTemplate'
 });

 var ListView = Marionette.CollectionView.extend({
  tagName: 'ul',
  childView: SingleLink
 });

 var FooCompositeView = Marionette.CompositeView.extend({
 //    el: '#main',
    childView: SingleLink,
    childViewContainer: '#fooList',
    template: '#listTemplate'
 });

 var list = new Backbone.Collection([
  {path: 'http://google.com'},
  {path: 'http://mojotech.com'}
 ]);


  var MyController = Marionette.Controller.extend({
    index : function() {
        // ハッシュなしでアクセスされたときの処理を書く
        console.log('index', arguments);
    },

    mypage : function() {
        // #mypageでアクセスされたときの処理を書く
        console.log('mypage', arguments);
        $('#output').html('<p>mypage</p>');
    },

    blog : function(id) {
        // #blog（または#blog/123など）でアクセスされたときの処理を書く
        console.log('blog=' + id, arguments);
        $('#output').html('<p>blog:' + id + '</p>');
    },
    
    urls : function() {
      (new ListView({
        collection: list,
        el: '#output'
      })).render();
    },
    
    compo : function() {
      (new FooCompositeView({
        collection: list,
        el: '#output'
      })).render();
    }
    
  });

  var myController = new MyController();

  var Router = new Marionette.AppRouter({
    controller: myController,
    appRoutes : {  // ハッシュフラグメントと対応するメソッド名の組を設定する
        ''           : 'index',
        'mypage'     : 'mypage',
        'blog(/:id)' : 'blog',
        'urls'       : 'urls',
        'compo'       : 'compo'
    }

  });

 // DOMの生成が完了してからstart()させる
 $(function () {
    Backbone.history.start();  // ブラウザのhashChangeの監視を開始する
 });
 </script>

 </head>
 <body>
  <h1>Routerの基本形</h1>

  <ul>
    <li><a href="#mypage">mypage</a></li>
    <li><a href="#blog/1">blog</a></li>
    <li><a href="#urls">urls</a></li>
    <li><a href="#compo">compo</a></li>
  </ul>

  <div id="output"></div>

  <h2>参考</h2>
  <ul>
    <li>http://yutapon.hatenablog.com/entry/2014/03/02/003937</li>
    <li>http://marionettejs.com/docs/v2.4.1/marionette.approuter.html</li>
    <li>http://marionettejs.com/docs/marionette.compositeview.html</li>
  </ul>

 <script type="text/template" id="itemTemplate">
  <a href='<%-path%>'><%-path%></a>
 </script>

 <script type="text/template" id="listTemplate">
    <h1>Item List</h1>
    <ul id="fooList"></ul>
 </script>

 </body>
 </html>
	<html>
	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.1/backbone.marionette.js"></script>

	<script>

	var SingleLink = Marionette.ItemView.extend({
	tagName: "li",
	template: '#itemTemplate'
	});

	var ListView = Marionette.CollectionView.extend({
	tagName: 'ul',
	childView: SingleLink
	});

	var FooCompositeView = Marionette.CompositeView.extend({
	// el: '#main',
	childView: SingleLink,
	childViewContainer: '#fooList',
	template: '#listTemplate'
	});

	var list = new Backbone.Collection([
	{path: 'http://google.com'},
	{path: 'http://mojotech.com'}
	]);


	var MyController = Marionette.Controller.extend({
	index : function() {
	// ハッシュなしでアクセスされたときの処理を書く
	console.log('index', arguments);
	},

	mypage : function() {
	// #mypageでアクセスされたときの処理を書く
	console.log('mypage', arguments);
	$('#output').html('<p>mypage</p>');
	},

	blog : function(id) {
	// #blog（または#blog/123など）でアクセスされたときの処理を書く
	console.log('blog=' + id, arguments);
	$('#output').html('<p>blog:' + id + '</p>');
	},

	urls : function() {
	(new ListView({
	collection: list,
	el: '#output'
	})).render();
	},

	compo : function() {
	(new FooCompositeView({
	collection: list,
	el: '#output'
	})).render();
	}

	});

	var myController = new MyController();

	var Router = new Marionette.AppRouter({
	controller: myController,
	appRoutes : { // ハッシュフラグメントと対応するメソッド名の組を設定する
	'' : 'index',
	'mypage' : 'mypage',
	'blog(/:id)' : 'blog',
	'urls' : 'urls',
	'compo' : 'compo'
	}

	});

	// DOMの生成が完了してからstart()させる
	$(function () {
	Backbone.history.start(); // ブラウザのhashChangeの監視を開始する
	});
	</script>

	</head>
	<body>
	<h1>Routerの基本形</h1>

	<ul>
	<li><a href="#mypage">mypage</a></li>
	<li><a href="#blog/1">blog</a></li>
	<li><a href="#urls">urls</a></li>
	<li><a href="#compo">compo</a></li>
	</ul>

	<div id="output"></div>

	<h2>参考</h2>
	<ul>
	<li>http://yutapon.hatenablog.com/entry/2014/03/02/003937</li>
	<li>http://marionettejs.com/docs/v2.4.1/marionette.approuter.html</li>
	<li>http://marionettejs.com/docs/marionette.compositeview.html</li>
	</ul>

	<script type="text/template" id="itemTemplate">
	<a href='<%-path%>'><%-path%></a>
	</script>

	<script type="text/template" id="listTemplate">
	<h1>Item List</h1>
	<ul id="fooList"></ul>
	</script>

	</body>
	</html>
No results found