Question

我第一次使用Backbone.js，并且正在学习许多教程之一。

我按下应该转到模板的按钮并且想知道是否有人可以帮助解决问题时，我无法加载第二个模板。

这是我的js代码：

var Processes = Backbone.Collection.extend({
    url: '/'
});

var ProcessView = Backbone.View.extend({
    el: '.template',

    render: function () {
        var template = _.template($('#process-template').html())
        this.$el.html(template);

    }
});

var KLWView = Backbone.View.extend({
    el: '.template',

    render: function () {
        var template = _.template($('#klw-template').html())
        this.$el.html(template);

    }
});

var Router = Backbone.Router.extend({
    routes: {
        '': 'process',
        'klw': 'klw'
    }
});

var processView = new ProcessView();
var klwView = new KLWView();

var router = new Router();

router.on('route:process', function(){
    console.log('home page loaded');
    processView.render();
});
router.on('route:klw', function(){
    console.log('klw page loaded');
    klwView.render();
});

Backbone.history.start();

这是模板视图：

<script type="text/template" id="process-template">

    <div id="holder_process" class="container">
        <h1>KLW Process</h1>
        <ul>
            <li><button id="run" class="rndbuttoninpt">Run Now</button></li>
            <a href='#/klw'><li><button id="new" class="rndbuttoninpt">New KLW</button></li></a>
        </ul>
        <form id="process" class="container process_holder" method="post" action=''>

            <fieldset>
                <div class="form_input">
                    <label for="pname">Process Name:</label>
                    <input type="text" id="pname" class="form-text">
                </div>
            </fieldset>

            <fieldset>
                <div>
                    <label for="active" class="radio_label">Active:</label>
                    <div id="options">
                        <label for="yes" class="radio">Yes<input type="radio" name="active" id="yes"></label>
                        <label for="no" class="radio">No<input type="radio" name="active" id="no"></label>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <div class="form_input">
                    <label for="location">File Location:</label>
                    <input type="file" id="location" class="form-text">
                </div>
            </fieldset>

            <fieldset>
                <div class="form_input">
                    <label for="type">File Type:</label>
                    <select id="type" class="form-text">
                        <option>Type1</option>
                        <option>Type2</option>
                    </select>
                </div>
            </fieldset>

            <fieldset>
                <div class="form_input">
                    <label for="action">Action:</label>
                    <select id="action" class="form-text">
                        <option>Action1</option>
                        <option>Action2</option>
                    </select>
                </div>
            </fieldset>
            <fieldset>
                <div class="form_input">
                    <label for="action_name" class="action_name">Action Name:</label>
                    <input type="text" class="action_name" class="form-text">
                </div>
            </fieldset>
    </form>
    </div>
</script>

<script type="text/template" id="klw-template">
        <div id="holder" class="container">
           <h1>Code Here</h1>
        </div>

</script>

这也是应该进入视图的按钮：

<a href='#/klw'><li><button id="new" class="klwinpt">New KLW</button></li></a>

我知道很可能是我在DOM加载之前定义了视图，如果有人能指出如何解决这个问题？这是教程中的人正在做的确切方式，它对他们来说效果很好。

Answer 1

看到你的代码，你似乎在渲染中做了类似的事情：

render: function () {
        var template = _.template($('#klw-template').html())
        this.$el.html(template);

    }

我认为_.template（＆＃34; ...＆＃34;）返回一个函数，你应该调用那个函数，而不是直接传递给它html（）

render: function () {
        var template = _.template($('#klw-template').html())
        this.$el.html(template());

    }

我认为这应该解决问题

Answer 2

这是我的建议。

首先，在项目中包含非缩小的下划线库，您不希望在缩小的库上调试代码。
然后，在#klw-template模板的顶部，包含以下代码<%debugger %>。
使用调试程序（例如Google DevTools或Firefox Firebug）在Chrome或Firefox中运行应用程序时，运行时将在<%debugger %>行中断。

此时您将在里面呈现您的Underscore.js模板渲染，您将能够看到模板可用的局部变量以及哪些参数模板渲染器正在寻找。

模板不会加载Backbone.js

2 个答案: