1

私はコーディングする必要があります：

window.TicketCollection = Backbone.Collection.extend({
    model:Tickets,
    url:"/index.php/tickets/viewJSON"
});
window.TicketsView = Backbone.View.extend({
    tagName:'div',
    initialize: function () {
        this.model.bind("reset", this.render, this);

    },
    render:function(eventName){
        _.each(this.model.models, function(ticket){
            $(this.el).append(new TicketListItemView({model:ticket}).render().el);
        },this);
        return this;
    }
});
window.TicketListView = Backbone.View.extend({
    tagName: "li",
    template:_.template($('#tickets-list-item').html()),
    render:function (eventName){
        $(this.el).html(this.template(this.model.toJSON));
        return this;
    }
});


var AppRouter = Backbone.Router.extend({
    routes:{
        "":"list"
    },
    list:function(){
        window.alert("alright");
        this.ticketList = new TicketCollection();
        this.ticketLists = this.ticketList.get();

        this.ticketListView = new TicketListView({model:this.ticketList});
        $("#ticketListHolder").html(this.ticketListView.render().el);
    },
});
var app = new AppRouter();
Backbone.history.start();
});

私のPHPは次のとおりです。

<?php header('Content-type: application/json');
echo json_encode(array("ticketID"=>"test", "ticketName"=>"1"));?>

PHPからの応答は次のとおりです。

[{"ticketID":"1","ticketName":"Fix the admin system"}]

HTML：

<div id="ticketListHolder">
    #


</div>
<script type="text/template" id="tickets-list-item">
        <div class="supTicket ticketHolder nobg">
        <div class="issueType">
        <span class="issueInfo"><%= ticketName %></span>
        <span class="issueNum">[ #<%= ticketID %>] - <%= fullName %></span>
        </div>
        </div>
</script>

エラーが発生します：Uncaught ReferenceError: ticketName is not defined、jsonを解析しておらず、代わりに1つの文字列ブロックとして読み取っているようです。JSONが正しいデータを返しているのに、なぜこのエラーが発生するのですか。

4

3 に答える 3

1

collection.fetchどこにも使用しません。ルーターはおそらく次のようになります

var AppRouter = Backbone.Router.extend({
    routes:{
        "":"list"
    },
    list:function(){
        window.alert("alright");
        this.ticketList = new TicketCollection();

        this.ticketListView = new TicketListView({
                model:this.ticketList,
                el:$("#ticketListHolder") // I directly assigned #ticketListHolder as the el
        });

        this.ticketList.fetch();
    },
});

そして、コードのほとんどが機能しているバージョンのフィドルhttp://jsfiddle.net/Cc9Ad/2/ チェックする必要のあるいくつかのポイント：

  • ListViewとItemViewは逆で、
  • ダニエル・アランダが彼の答えで言ったように、意図された目的のためにコレクションとモデルを使用するようにしてください、
  • this.model.toJSONはthis.model.toJSON（）である必要があります
  • モデルにデフォルトを設定します。fullNameは定義されておらず、この状態で使用するとテンプレートエンジンが機能しなくなります。

改訂されたコード

window.Tickets=Backbone.Model.extend({
    defaults: {
        fullName :"No full name"
    }
});
window.TicketCollection = Backbone.Collection.extend({
    model:Tickets,
    url:"/index.php/tickets/viewJSON"
});


window.TicketsView = Backbone.View.extend({
    tagName:'li',
    template:_.template($('#tickets-list-item').html()),

    initialize: function () {
    },
    render:function(eventName){
        console.log
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});
window.TicketListView = Backbone.View.extend({   
    initialize: function () {
        this.collection.bind("reset", this.render, this);

    },

    render:function (){
        this.collection.each( function(ticket){
            $(this.el).append(new TicketsView({model:ticket}).render().el);
        },this);

        return this;
    }
});


        var ticketList = new TicketCollection();

        var ticketListView = new TicketListView({
                collection:ticketList,
                el:$("#ticketListHolder")
        });

// ticketList.fetch();
ticketList.reset([
    {"ticketID":"1","ticketName":"Fix the admin system"},
    {"ticketID":"2","ticketName":"The ticket 2"}
]);
于 2012-07-31T14:20:54.137 に答える
1

モデルはコレクションと同じではありません。

コレクションをモデルとして使用しようとしています。

この例を確認してください：http： //danielarandaochoa.com/backboneexamples/blog/2012/02/22/real-world-usage-of-a-backbone-collection/

また、特定の問題を修正するには、Backbone.Modelではなくオブジェクトをテンプレートに渡します。

 $(this.el).html(this.template(this.model.toJSON()));

括弧がありませんでした。

しかし、私が言ったように、コレクションの使用方法を説明している記事を読むことをお勧めします。

于 2012-07-31T14:22:14.990 に答える
0

JSON.parse（）関数を使用して、PHPから送信されたデータを解析します。

var a = $.ajax({
    url:"/index.php/tickets/viewJSON",
    async:false,
    cache:false
}).responseText;

jsonData = JSON.parse(a);


then use  _.each to loop jsonData then push each data to your model.
于 2012-07-31T14:12:37.433 に答える