模型未在主干.js中呈现

Model not rendering in Backbone.js

本文关键字：js 模型更新时间：2023-09-26

我正在构建一个简单的移动JavaScript应用程序，包括Backbone.js和Forge。我正在尝试做的是拥有一个建议模型和这些模型的类别集合，并创建一个建议并使用下划线模板在视图中呈现该建议。但这一建议并没有被采纳。这是主文件.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));

而指数.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
} );