0

私は研究を始めたばかりで、バックボーン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/ 下手な英語でごめんなさい。

4

1 に答える 1

0

Asynchronous Module Definition (AMD)、特にrequirejsを見てください。コードをモジュールに構造化したり、必要に応じてテンプレート (ハンドルバーなど) をロードしたりできます。

http://requirejs.org/

https://github.com/SlexAxton/require-handlebars-plugin

于 2014-01-29T02:38:46.687 に答える