Question

我刚开始研究并在骨干JS上做一些练习。在我做了一些关于骨干的基本编码后，我发现在一个html文件中，它的代码太多，很难组织我的代码，比如组织我的模型，视图，函数，模板等。

如果我有5-10视图，20模型，20 +模板怎么办？然后我的一个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的模板，是否可以像这样使用php？

<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构建/格式化整个网站/应用的行业/正确方法。

这些结构/格式是否有任何关键字，以便我可以在谷歌搜索？

非常感谢＆amp;感谢帮助

对不起我的英语不好。

Answer 1

查看异步模块定义（AMD），特别是requirejs。它允许您将代码构建到模块中，并根据需要加载模板（例如手柄）。

http://requirejs.org/

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

如何在Backbone JS中以正确的方式安排文件/代码

1 个答案: