Question

我发现骨干框架和我尝试研究它，或多或少我理解模型，但我有一些问题。我创建了一个带有模型，集合和视图的js文件，问题是我没有看到我的视图，哪里出错了？

$(function(){

var Todo = Backbone.Model.extend({
  // Default todo attribute values
  defaults: {
    title: 'Default text',
    completed: false
  }
});

var todo1 = new Todo();
var todo2 = new Todo({
  title: 'Todo 2'
});
var todo3 = new Todo({
  title: 'Todo 3'
});

var TodosCollection = Backbone.Collection.extend({
    model: Todo
});
var todoList = new TodosCollection([todo1,todo2]);

var TodoView = Backbone.View.extend({

    tagName:  "li",

    template: '#item-template',

    events: {
    },

    initialize: function() {

        //precompilo il template
        this.template = _.template($('#item-template').html());

        //forzo il contesto di questi metodi della view
        _.bindAll(this, 'render', 'remove');

        //resto in ascolto nel caso il modello sia cancellato e rimuovo anche la view dal DOM
        //.remove() è un metodo di default in Backbone.View
        this.model.bind('destroy', this.remove);

    },

    //metodo che stampa l'HTML della view
    render: function() {

      var data = this.model.toJSON();

      this.$el.html(this.template(data));

      return this;
    }


});

var TodoRoute = Backbone.Router.extend({

    routes : {
        //questa è la route corrispondente all'home dell'applicazione
        '*page' : 'defaultPage',
        //una route parametrica
        'todos/:id' : 'getToDo'
    },
    defaultPage : function () {
        new TodoView({model:todo2});
    },
    getToDo : function (id){}
});

var todoRoute = new TodoRoute();
Backbone.history.start({ pushState : true});

});

的index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Start</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
  <script src="start.js"></script>

</head>
<body>

<ul id="menu">
    <li><a href="#index">Index</a></li>
    <li><a href="#todos">To Do</a></li>
</ul>

<div id="content">
</div>

<!-- Item Template -->

<script type="text/template" id="item-template"> 
  <div class="myItem"><%= title %></div>
</script>

</body>
</html>

Answer 1

您需要自己将其实际添加到页面中，

defaultPage : function () {
    var view = new TodoView({model:todo2});
    Backbone.$('#content').append(view.render().$el);
},

骨干基本视图

1 个答案: