骨干渲染问题

时间:2014-02-01 17:15:21

标签: backbone.js underscore.js

我正在使用JBoss Backbone Sample

的模板 我有

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

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("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; });

收集/ states.js



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

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

视图/桌面/ states.js define([ 'configuration', 'backbone' ], function (config) { var State = Backbone.Model.extend({ urlRoot: config.baseUrl + 'rest/states' }); return State; });

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; });

templates / desktop / states.html

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;
});

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; });

utilities.js

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

由于

1 个答案:

答案 0 :(得分:0)

尝试将el作为字符串传递而不是jquery引用。

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

另外,在您使用el $(this.el)的地方,将其更改为this.$el