Question

试图让Backbone.js在index.html上显示一条简单的消息...如果我尝试使用下划线，它会失败但是如果我尝试做类似

questionTemplate: _.template( '<div>Hello <%= msg %></div>')

......我错过了什么？

的index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="quiz_question">
  <input id="back_id" type="button" value="Back">
  <input id="next_id" type="button" value="Next">
</div>
<script type="text/template" id="qtemplate"></script>
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/backbone.localStorage.js"></script>
<script src="js/questionmodel.js"></script>
<script src="js/questioncollection.js"></script>
<script src="js/questionview.js"></script>
<script src="js/app.js"></script>
<script type="text/template" id="qtemplate">
  <div><%= msg %></div>
</script>
</body>
</html>

app.js

  var app = app || {};
  $(function() {
    // Kick things off by creating the **App**.
    new app.QuestionView();
  });

questionview.js

var app = app || {};
app.QuestionView = Backbone.View.extend({
  // Instead of generating a new element, bind to the existing skeleton of
  // the App already present in the HTML.
    el: '#quiz_question',
    // Our template for the line of statistics at the bottom of the app.
    questionTemplate: _.template( $('#qtemplate').html() ),
    //questionTemplate: _.template( '<div>Hello <%= msg %></div>'),
    // Delegated events for displaying new questions, and clearing existing ones
    events: {
      'click #back_id': 'displayPreviousQuestion',
      'click #next_id': 'displayNextQuestion'
    },
    // The QuestionView listens for changes to its model, re-rendering. Since there's
    // a one-to-one correspondence between a **Question** and a **QuestionView** in this
    // app, we set a direct reference on the model for convenience.
    initialize: function() {
      //app.Questions.fetch();
      this.render();
    },
    render: function(){
        // render the function using substituting the varible 'who' for 'world!'. 
        this.$el.append(this.questionTemplate({msg: "hope floats"}));
        //***Try putting your name instead of world.
    },
    displayPreviousQuestion: function() {
    },
    displayNextQuestion: function() {
    }
});

Answer 1

您的页面如下所示：

<script src="js/questionview.js"></script>
<!-- ... -->
<script type="text/template" id="qtemplate">
  <div><%= msg %></div>
</script>

所以questionview.js将在#qtemplate位于DOM之前加载并执行。在questionview.js内你有这个：

app.QuestionView = Backbone.View.extend({
  //...
  questionTemplate: _.template( $('#qtemplate').html() ),

所以_.template( $('#qtemplate').html() )会在加载questionview.js时执行，并且在之前发生#qtemplate可用_.template(undefined)。结果是你最终做了$(function() { ... })并且没有做任何有用的事情。

您可以将视图定义包装在initialize: function() { this.questionTemplate = _.template($('#qtemplate').html()); }中以延迟执行，直到DOM准备就绪，或者您可以延迟创建模板函数，直到您需要它为止：

QuestionView

在{{1}}中。这两种基本方法有所不同，但应该让你开始。

Answer 2

上面的答案解释原因非常好，但是如果你想快速修复，将模板标签移到其他脚本之上会解决问题。

下划线模板不适用于Backbone.js的简单消息

2 个答案: