Javascript 未在Backbone.js中渲染模型_Javascript_Backbone.js_Trigger.io_Forge

Javascript 未在Backbone.js中渲染模型

javascript backbone.js

Javascript 未在Backbone.js中渲染模型,javascript,backbone.js,trigger.io,forge,Javascript,Backbone.js,Trigger.io,Forge,我正在使用Backbone.js和Forge构建一个简单的移动javascript应用程序。我试图做的是创建一个建议模型和这些模型的类别集合，并创建一个建议，并使用下划线模板在视图中呈现出来。但这一建议并没有实现。下面是main.js文件： (function ($) { forge.enableDebug(); var Suggestion = Backbone.Model.extend({ urlRoot: function () {

我正在使用Backbone.js和Forge构建一个简单的移动javascript应用程序。我试图做的是创建一个建议模型和这些模型的类别集合，并创建一个建议，并使用下划线模板在视图中呈现出来。但这一建议并没有实现。下面是main.js文件：

(function ($) {
    forge.enableDebug();

    var Suggestion = Backbone.Model.extend({

        urlRoot: function () {
            if (this.isNew()){
                return "/suggestions"
            }
            "/suggestions/" + this.id + ".json"
        },
        defaults: {
            id: this.Category.length + 1,
            title: "A Suggestion",
            description: "You should go suggest something",
            ranking: 1,
            done: false,
        },
        initialize: function() {
            forge.logging.log('The suggestion model has been initialized')
        },

    });


    var Category = Backbone.Collection.extend({
        model: Suggestion,

        urlRoot: function(){
            '/suggestions'
        },

        random: function(){
            var randomnumber=Math.floor(Math.random()*this.length + 0)
            forge.logging.log("just randomized" + randomnumber )
        },
        initialize: function(){
            forge.logging.log("app initiliazed")
            //this.fetch();
        },

        addSuggestions: function(suggestions){

        },

    }});


    Router = Backbone.Router.Extend({
        routes:{
            "":"index",
            "suggestion/:suggestion_id":"Suggestion"
        },

        index: function(){
            category.index();
        }
    });
    SuggestionView = Backbone.View.Extend({

        model: Suggestion
        el: $('#suggestions')
        tagName: "div",

        className: "suggestion"

        template: _.template($("#SuggestionTemplate").html())

        render: function(){
            $(this.el).html(template(this.model.toJSON()));
        },

        events:{
            "tap li": "DetailedView"
        },

        initialize: function(){
            forge.logging.log("rendering suggestions")
            this.render();
        }




    });
    DetailedView = Backbone.View.Extend({

        model: Suggestion
        template: _.template($("#DetailedTemplate").html)

        render: function(){
            this.$el.html(template(this.model.toJSON))
        }
    });
    CategoryView = Backbone.View.Extend({
        el:$("#main")
        tagname: "div",

        initialize: function(){
            forge.logging.log("rendering Suggestions")
            this.render();

        },

        render: function(){
            this.Suggestions.each(this.addOne)
        }
        addOne: function(suggestion){
            var view = new SuggestionView
            this.$el.append(view.render().el)
        }


    });

    var suggestion1 = new Suggestion()
    suggestion1.set(title:"this")

    var category = new Category();
    var router = new Router();
    var categoryView = new CategoryView();


} (jQuery));

以及index.html：

<!DOCTYPE html>
<html>
    <head>
    <title>Just The Best</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script data-main="scripts/main" src="js/require.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="js/main.js"></script>

    <script src="https://trigger.io/catalyst/target/target-script-min.js#47DC7BF1-5D55-4549-8B64-216CA27A73FF"></script>

    <link rel="stylesheet" href="css/style.css" />

</head>
<body>

<div data-role="page">
    <div id="#main">

    </div>


</div>
<script type="text/html" id="SuggestionTemplate">
    //<div class="suggestion">
        <h2>Suggestion</h2>
        <h3><%=Suggestion.title%></h3>

    //</div>
</script>

</body>


最好的
//
暗示
//

如果我错过了一个基本功能，我真的很抱歉。谢谢。

传递

el

查看构造函数比传递

extend（）

更常见。至于它的其余部分，您可能需要以下内容。此外，您的代码缺少大量分号和逗号

CategoryView = Backbone.View.Extend( {

    // ...

    render : function () {

        this.collection.each( _.bind( this.addOne, this ) );

    },

    addOne : function( suggestion ) {

        var view = new SuggestionView( { model : suggestion } );

        this.$el.append( view.render().el );

    }

} );


var category = new Category( [

  { title : "this" }

] );

var router = new Router();

var categoryView = new CategoryView( {

  collection : category

} );

传递

el

以查看构造函数比传递

extend（）

更常见。至于它的其余部分，您可能需要以下内容。此外，您的代码缺少大量分号和逗号

CategoryView = Backbone.View.Extend( {

    // ...

    render : function () {

        this.collection.each( _.bind( this.addOne, this ) );

    },

    addOne : function( suggestion ) {

        var view = new SuggestionView( { model : suggestion } );

        this.$el.append( view.render().el );

    }

} );


var category = new Category( [

  { title : "this" }

] );

var router = new Router();

var categoryView = new CategoryView( {

  collection : category

} );

其中是

此。在CategoryView
中的建议

来自哪里？

CategoryView的

集合是

Category

，它有一个模型

建议

。我想你可以将模型作为函数调用，但可能不行。这个

在哪里。在CategoryView
中的建议来自哪里？CategoryView的集合是Category
，它有一个模型建议。我想你可以把模型作为函数调用，但也许不行。