1

Backbone.js と Forge を使用して、単純なモバイル JavaScript アプリケーションを構築しています。私がやろうとしているのは、提案モデルとそれらのモデルのカテゴリ コレクションを用意し、1 つの提案を作成して、アンダースコア テンプレートを使用してビューに表示することです。しかし、その提案は実現していません。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>

基本的な機能が欠けている場合は、本当に申し訳ありません。ありがとうございました。

4

1 に答える 1

1

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

} );
于 2012-08-12T04:04:55.750 に答える