1

私は Backbone を初めて使用します (私を嫌いにならないでください) が、非常に単純なことをしようとして髪を引っ張っています。

jsonファイルをロードしています（firebugでロードされていることがわかります）。純粋にテスト用に（最初のバックボーンコードとして）そこから情報を取得したいだけです

ただし、これを機能させることはできず、1 つの空白の li タグ (以下のコード) になります。

<ul id="phones"></ul>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>

<script id="foo" type="text/template">
        <li><%= name %></li>
    </script>

<script>

    var Phones = Backbone.Collection.extend({
        url:'http://backbone.local/phones/phones.json'
    })
    var PhonesView = Backbone.View.extend({
        el:'#phones',
        initialize:function(){
            this.collection = new Phones();
            this.collection.fetch();
            this.render();
        },
        template:_.template($('#foo').html()),
        render:function(){
                    var foo = this.collection.toJSON();
            $(this.el).html(this.template(foo));
            return this;
        }
    })
    var phonesView = new PhonesView();
</script>

どんなポインタでも大歓迎です。

乾杯、

更新 1

フェッチが非同期であることが原因かもしれないと思ったので、以下のようにフェッチの成功コールバックでレンダリングを呼び出しました。console.log は正常に起動しますが、レンダリングされた html にはまだ json データがありません (ハンドルバーを使用するように変更しました)

       <script>
        var Phones = Backbone.Collection.extend({
            url:'http://backbone.local/phones/phones.json'
        })
        var PhonesView = Backbone.View.extend({
            el:'#phones',
            initialize:function(){
                var self = this;
                this.collection = new Phones();
                this.collection.fetch({
                    success:function(){
                        console.log('json loaded');
                        self.render();
                    }
                });
            },
            template: Handlebars.compile('<li>sdsadsadsadsad {{name}} dsfcdfd</li>'),
            render:function(){
                var foo = this.collection.toJSON();
                $(this.el).html(this.template(foo));
                return this;
            }
        })
        var phonesView = new PhonesView();
    </script>
4

3 に答える 3

1

ハンドルバーを使用すると、コレクションテンプレートは次のようになります。

{{#items}} <li>  {{name}} </li> {{/items}}

itemsまた、Handlebarsテンプレートが上記のようにコレクションJSONを参照できるように、コレクションJSONをオブジェクトでラップする必要があります。

var foo = { items: this.collection.toJSON() };

編集

実際にはもう1つの問題があります...collection.toJSON()各モデルがJSONに変換されません。したがって、次のように書く必要があります。

this.collection.models.map(function(x) { return x.toJSON(); });

フィドルデモ

于 2012-12-13T19:21:43.153 に答える
0

なぜ空のliしか得られないのかという明確な質問に答えるために。テンプレートに名前データを送信する必要があります。例えば：

render:function(){
    var firstModel = this.collection.at(0);
    var firstName = firstModel.get("name");
    $(this.el).html(this.template({name: firstName}));
    return this;
}

もちろん、上記のコードは何が欠けているかを理解するためのものであり、バックボーン アプリケーションをどのように実装すべきかを理解するためのものではありません。Backbone の Web サイトからリンクされている注釈付きの TODO の例に目を通し、そこに実装されている基本的なパターンを理解することを強くお勧めします。

コメントに基づいて更新:
これを解決するさまざまな方法。本当に読むことをお勧めします: http://backbonejs.org/docs/todos.html

これを解決する「ハックパス」を続行して、何かを見ることができます。

addOne: function(phone) {
    this.$el.append(this.template(phone.toJSON()));
    return this;
},

render: function() {
    this.$el.html(); //clear everything in the view
    this.collection.forEach(_.bind(this.addOne,this)); //Will call addOne for every model in the collection.
    return this;
}
于 2012-12-13T16:54:39.277 に答える
0

あなたの見解では：

'initialize': function() {
    this.template = _.template('<p><% model.text $></p>');
    this.collection.fetch({error: function() { console.log(arguments); }, 'success': _.bind(this.onFetch,this) });
    return this;
},
'onFetch': function(collection) {
    this.collection.on("add", this.onAdd, this);          
    this.collection.each( _.bind(this.onAdd, this) );
    return this;
},
'onAdd': function(model){    
    //do something like:
    this.$el.find('.items').append(this.template({model: model}) ) 
);
于 2012-12-13T16:28:44.610 に答える