Backbone Rendering Issue

Question

Я использую шаблон JBoss Backbone Sample

У меня есть

Model:  State 
Collection: States 
View:  StatesView 
HTML:  state.html 
and a  Router. 

Проблема моя State.html не получает оказаны. Вызов REST для извлечения Модели в порядке.

Я просто хотел, чтобы html был поднят и отобразился. я что-то упускаю/злоупотребляю? Ошибок в журналах нет.

маршрутизатор/router.js

define("router", [ 
     'jquery', 
     'underscore', 
     'configuration', 
     'utilities', 
     'app/models/state', 
     'app/collections/states', 
     'app/views/desktop/states' 
    ],function ($, 
       _, 
       config, 
       utilities, 
       State, 
       States, 
       StatesView) { 

     var Router = Backbone.Router.extend({ 
      initialize: function() { 
       Backbone.history.start(); 
      }, 
      routes:{ 
       "":"states", 
       "states":"states", 
       "ignore":"ignore", 
       "*actions":"defaultHandler" 
      }, 
      states:function() { 

       var states = new States(); 
       var statesView = new StatesView({model:states, el:$("#content")}); 
      } 
     }); 

     var router = new Router(); 
     return router; 
    }); 

модель/state.js

define([ 
     'configuration', 
     'backbone' 
    ], function (config) { 

     var State = Backbone.Model.extend({ 
      urlRoot: config.baseUrl + 'rest/states' 
     }); 
     return State; 
    }); 

коллекция/states.js

define([ 
     'app/models/state', 
     'configuration', 
     'backbone' 
    ], function (State, config) { 

     var States = Backbone.Collection.extend({ 
      url: config.baseUrl + 'rest/states', 
      model: State, 
      id:'mid' 
     }); 
     return States; 
    }); 

просмотров/настольные/states.js

define([ 
    'utilities', 
    'text!../../../../templates/desktop/states.html' 
], function (
    utilities, 
    statesTemplate) { 

    var StatesView = Backbone.View.extend({ 
     render:function() { 
      utilities.applyTemplate($(this.el), statesTemplate, {model:this.model}) 
      return this; 
     } 
    }); 
    return StatesView; 
}); 

и шаблоны/настольные/states.html

<div> 
<h1>Test</h1>  
</div> 

utilities.js

define(['underscore', 'backbone'], function (_, Backbone) { 

    var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; 
    var monthNames = ["January", "February", "March", "April", "May", "June", 
     "July", "August", "September", "October", "November", "December"]; 


    Date.prototype.toPrettyString = function() { 
     return dayNames[this.getDay()] + " " + 
      this.getDate() + " " + 
      monthNames[this.getMonth()] + " " + 
      this.getFullYear() + " at " + 
      this.getHours().toZeroPaddedString(2) + ":" + 
      this.getMinutes().toZeroPaddedString(2); 
    }; 

    Date.prototype.toPrettyStringWithoutTime = function() { 
     return dayNames[this.getDay()] + " " + 
      this.getDate() + " " + 
      monthNames[this.getMonth()] + " " + 
      this.getFullYear(); 
    }; 

    Date.prototype.toYMD = function() { 
     return this.getFullYear() + '-' + (this.getMonth() + 1).toZeroPaddedString(2) + '-' + this.getDate().toZeroPaddedString(2); 
    }; 

    Date.prototype.toCalendarDate = function() { 
     return { 'day':this.getDate(), 'month':this.getMonth(), 'year':this.getFullYear()}; 
    }; 

    Date.prototype.withoutTimeOfDay = function() { 
     return new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0, 0); 
    }; 

    Date.prototype.asArray = function() { 
     return [this.getFullYear(), this.getMonth(), this.getDate()]; 
    }; 


    Date.prototype.toTimeOfDay = function() { 
     return { 'hours':this.getHours(), 'minutes':this.getMinutes(), 
      'seconds':this.getSeconds(), 'milliseconds':this.getMilliseconds()}; 
    }; 

    Date.prototype.diff = function (other) { 
     return parseInt((this.withoutTimeOfDay().getTime() - other.withoutTimeOfDay().getTime())/(1000.0 * 60 * 60 * 24)); 
    }; 

    Number.prototype.toZeroPaddedString = function (digits) { 
     val = this + ""; 
     while (val.length < digits) val = "0" + val; 
     return val; 
    }; 

    Backbone.View.prototype.close = function(){ 
     $(this.el).empty(); 
     this.undelegateEvents(); 
     if (this.onClose){ 
      this.onClose(); 
     } 
    }; 

    // utility functions for rendering templates 
    var utilities = { 
     viewManager:{ 
      currentView:null, 

      showView:function (view) { 
       if (this.currentView != null) { 
        this.currentView.close(); 
       } 
       this.currentView = view; 
       return this.currentView.render(); 
      } 
     }, 
     renderTemplate:function (template, data) { 
      return _.template(template, (data == undefined) ? {} : data); 
     }, 
     applyTemplate:function (target, template, data) { 
      return target.empty().append(this.renderTemplate(template, data)); 
     } 
    }; 

    return utilities; 

}); 

Благодарности

Answer 1

Попробуйте прохождение эл как строка не эталонным JQuery.

var statesView = new StatesView({model:states, el:'#content'}); 

также, где вы использовать изменение эль $(this.el) это this.$el вместо.