1

只是试图让 Backbone.js 在 index.html 上显示一条简单的消息...如果我尝试使用下划线它会失败，但如果我尝试执行类似的操作，它将向 quiz_question div 元素附加一条消息

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

...我错过了什么？

索引.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>

应用程序.js

  var app = app || {};
  $(function() {
    // Kick things off by creating the **App**.
    new app.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() {
    }
});
4

2 回答 2

0

您的页面如下所示：

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

soquestionview.js将#qtemplate在 DOM 中加载并执行。在里面questionview.js你有这个：

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

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

您可以将视图定义包装在 a$(function() { ... })中以延迟其执行，直到 DOM 准备好之后，或者您可以延迟创建模板函数，直到您需要它，如下所示：

initialize: function() {
  this.questionTemplate = _.template($('#qtemplate').html());
}

在你的QuestionView. 这两种基本方法有所不同，但这应该可以帮助您入门。

于 2013-10-11T06:52:28.107 回答
0

上面的答案很好地解释了原因，但如果你想快速修复，将模板标签移动到其他脚本之上可以解决问题。

于 2013-10-11T12:08:50.813 回答