模型未在Backbone.js中呈现

Question

I am building a simple mobile javascript application, with Backbone.js and Forge. 我正在使用Backbone.js和Forge构建一个简单的移动javascript应用程序。 What I'm trying to do is have a Suggestion model and a Category collection of those models, and create one suggestion and have that render out in the view using an underscore template. 我想要做的是有一个建议模型和一个这些模型的类别集合，并创建一个建议，并使用下划线模板在视图中呈现该建议。 But that suggestion is not rendering out. 但是这个建议并没有实现。 Here's the main.js file: 这是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));

And the index.html: 还有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>

I am really sorry if I am missing out on a basic feature. 如果我错过了基本功能，我真的很抱歉。 Thank you. 谢谢。

Answer 1

It's more common to pass el to view constructors rather than to extend() . 传递el来查看构造函数而不是extend()更常见。 As for the rest of it, you probably want something more like the following. 至于其余部分，您可能想要更多类似以下内容的东西。 Also, your code is missing tons of semicolons and commas. 另外，您的代码缺少大量的分号和逗号。

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

} );

模型未在Backbone.js中呈现

问题描述

1 个解决方案

解决方案1
1 2012-08-12 04:04:55

模型未在Backbone.js中呈现

问题描述

1 个解决方案

解决方案1 1 2012-08-12 04:04:55

解决方案1
1 2012-08-12 04:04:55