Javascript 模板赢得'；t使用Backbone.js加载

我第一次使用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>

KLW工艺

快跑

进程名称：
活动：
对
不
文件位置：
文件类型：
类型1
类型2
行动：
行动1
行动2
行动名称：
代码在这里

这也是进入视图的按钮：

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

---

我知道这很可能是因为我在加载DOM之前就定义了视图，如果是这样的话，有人能指出如何解决这个问题吗？这正是教程中的人做这件事的方式，对他们来说很好

看到您的代码，您似乎在render中执行类似的操作：

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

    }

我认为u.template（“…”）返回一个函数，您应该调用该函数，而不是直接将其传递给html（）

---

我认为这应该可以解决这个问题，以下是我的建议

首先，在项目中包含非缩小的下划线库，您不希望在缩小的库上调试代码

然后，在

#klw模板的顶部包含以下代码

当您在Chrome或Firefox中使用调试器运行应用程序时（例如，Google DevTools或Firefox Firebug），运行时将在
行中断
此时，您将进入Underline.js模板渲染器的渲染，您将能够看到模板可用的局部变量以及模板渲染器正在查找的参数。
您在哪里定义路由器应该执行的功能？（
process
和
klw
@KimGysen在教程中，该人使用router.on和下划线的渲染函数来渲染路由你确定
是有效的HTML吗？@muistooshort是的，我刚下载时它正在工作。$el.HTML（'Template loaded'））；不，它是无效的，
不能是
的直接子对象），期望一些浏览器重写它并将其弄得一团糟。除此之外，你的问题是不完整的。您是否收到错误消息？流程模板在哪里？您能否至少提供一个功能演示？是的，下划线已将其模板函数从直接调用更改为函数：。遗憾的是，大多数主干教程还没有更新到这个新的行为hi@2292amit谢谢你，我做了改变，但遗憾的是这不起作用。我现在在谷歌的浏览器中工作，我得到了一个错误
未捕获的TypeError:cannotreadproperty'replace'of undefined
。还有别的吗？我知道它在渲染功能中失败，因为它注销了控制台中加载的klw页面。请共享调用堆栈。我想这会很有帮助
render: function () {
        var template = _.template($('#klw-template').html())
        this.$el.html(template());

    }