magnet88jp · May 17, 2015 07:23
diff --git a/marionette-region1.html b/marionette-region1.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({
    childView: SingleLink,
    childViewContainer: '#fooList',
    template: '#listTemplate'
 });

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

 var NewsView = Marionette.ItemView.extend({
    template : "#news"
 });
 ///////////////////////////////////////////////////////
 // ここから定義
 ///////////////////////////////////////////////////////

  var MyApp = Marionette.Application.extend({
    initialize : function(){
    },
    onStart : function() {
      Backbone.history.start();
    }
  });

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

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

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

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

    },
    
    region: function() {
      App.mainRegion.show(new NewsView);
    }
    
  });

 // DOMの生成が完了してからstart()させる
 $(function () {

  var app = new MyApp();

  var myController = new MyController();
  
  var myRouter = new MyRouter({
    controller: myController
  });
  
  app.addRegions({
    mainRegion : "#main",
    navigationRegion : "#navigation"
  });
  
  app.start();
  
  window.App = app;

  app.mainRegion.show(new NewsView());

  
 });
 </script>

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

 <div id="main-content"></div>
 <div id="navigation"></div>

  <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>
    <li><a href="#region">region</a></li>
  </ul>

  <div id="header"></div>

  <div id="main"></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>
    <li>http://be-shi.tumblr.com/post/103891249182/marionette-js-region</li>
    <li>* http://qiita.com/k_shimoji/items/dc9f1f8cff3a965c0d97</li>
    <li>http://enzolutions.com/articles/2014/06/02/routing-controlling-with-marionettejs/</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>

 <script type="text/template" id="layoutTemplate">
  <section>
    <navigation id="menu">menu</navigation>
    <article id="content">article</article>
  </section>
 </script>

 <script type="text/template" id="news" >
  <h2>this is news content</h2>
 </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({
	childView: SingleLink,
	childViewContainer: '#fooList',
	template: '#listTemplate'
	});

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

	var NewsView = Marionette.ItemView.extend({
	template : "#news"
	});
	///////////////////////////////////////////////////////
	// ここから定義
	///////////////////////////////////////////////////////

	var MyApp = Marionette.Application.extend({
	initialize : function(){
	},
	onStart : function() {
	Backbone.history.start();
	}
	});

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

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

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

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

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

	compo : function() {
	App.mainRegion.show(new FooCompositeView({
	collection: list
	}));

	},

	region: function() {
	App.mainRegion.show(new NewsView);
	}

	});

	// DOMの生成が完了してからstart()させる
	$(function () {

	var app = new MyApp();

	var myController = new MyController();

	var myRouter = new MyRouter({
	controller: myController
	});

	app.addRegions({
	mainRegion : "#main",
	navigationRegion : "#navigation"
	});

	app.start();

	window.App = app;

	app.mainRegion.show(new NewsView());


	});
	</script>

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

	<div id="main-content"></div>
	<div id="navigation"></div>

	<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>
	<li><a href="#region">region</a></li>
	</ul>

	<div id="header"></div>

	<div id="main"></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>
	<li>http://be-shi.tumblr.com/post/103891249182/marionette-js-region</li>
	<li>* http://qiita.com/k_shimoji/items/dc9f1f8cff3a965c0d97</li>
	<li>http://enzolutions.com/articles/2014/06/02/routing-controlling-with-marionettejs/</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>

	<script type="text/template" id="layoutTemplate">
	<section>
	<navigation id="menu">menu</navigation>
	<article id="content">article</article>
	</section>
	</script>

	<script type="text/template" id="news" >
	<h2>this is news content</h2>
	</script>


	</body>
	</html>
No results found