私は研究を始めたばかりで、バックボーンJSの練習をしています。バックボーンに関する少し基本的なコーディングを行った後、1 つの html ファイルで、コードが多すぎて、モデル、ビュー、関数、テンプレートなどを整理するなど、コードを整理するのが非常に難しいことがわかりました。
ビューが 5 ～ 10 個、モデルが 20 個、テンプレートが 20 個以上ある場合はどうでしょうか。次に、私の1つのhtmlファイルは、約1000行以上のコードになりますか?
以下は私のバックボーンのサンプルコードです:
</head>
<body>
<!-- Html -->
<div class="container">
<h1>Backbone Test</h1>
<hr/>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="_nav" data-nav=""><a href="#">Home</a></li>
<li class="_nav" data-nav="about"><a href="#about">About</a></li>
<li class="_nav" data-nav="contact"><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
<div class="page">
<!--Load Backbone Template @ Here-->
</div>
</div>
<!-- Template -->
<script type="text/template" id="tpl_homePage">
<p>Home</p>
<div style="width:100px;height:100px;background:red;cursor:pointer;" id="box"></div>
</script>
<script type="text/template" id="tpl_aboutPage">
<p>About</p>
</script>
<script type="text/template" id="tpl_contactPage">
<p>Contact</p>
</script>
<!-- Js -->
<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script>
//Modal
var homePage_model = Backbone.Model.extend({
defaults: {
score: 0,
attempts: 0,
currentLocation: 1,
currentColor: 'red'
}
});
//View
var _homePage = Backbone.View.extend({
el:'.page',
model: new homePage_model(),
render:function(){
var template = _.template($("#tpl_homePage").html());
this.$el.html(template);
},
events: {
'click div#box' : 'start',
},
start:function(){
// alert("start");
alert(this.model.defaults.score);
}
});
var _aboutPage = Backbone.View.extend({
el:'.page',
render:function(){
var template = _.template($("#tpl_aboutPage").html());
this.$el.html(template);
}
});
var _contactPage = Backbone.View.extend({
el:'.page',
render:function(){
var template = _.template($("#tpl_contactPage").html());
this.$el.html(template);
}
});
var homePage = new _homePage();
var aboutPage = new _aboutPage();
var contactPage = new _contactPage();
//Route
var Router = Backbone.Router.extend({
routes:{
'' : 'home',
'about':'about',
'contact':'contact',
}
});
var router = new Router();
//Router on
router.on('route:home',function(){
homePage.render();
});
router.on('route:about',function(){
aboutPage.render();
});
router.on('route:contact',function(){
contactPage.render();
});
Backbone.history.start();
//Etc
$(window).bind('hashchange', function() {
setNav();
});
$(document).ready(function() {
setNav();
});
function setNav(){
var hash = window.location.hash.replace(/^#/,'');
$("._nav").removeClass("active");
_.each($("._nav"),function(d){
var o = ($(d).data("nav"));
if(o == hash)$(d).addClass("active");
});
}
</script>
</body>
バックボーン js の template に対して、このように php include を使用する方法はありますか?
<script type="text/template" id="home_tpl">
<?PHP include "home_tpl.php"; ?>
</script>
<script type="text/template" id="about_tpl">
<?PHP include "about_tpl.php"; ?>
</script>
バックボーンJを使用するWebサイト/アプリ全体を構造化/フォーマットする業界/適切な方法を知りたい.
この種の構造/形式には、Google で検索できるようにキーワードがありますか?
どうもありがとう & 助けてくれてありがとう
p:s/ 下手な英語でごめんなさい。