0

リストを表示したいのですが、リスト内のアイテムをクリックすると、リストが非表示になり、アイテムの詳細を取得して表示したいと考えています。

マウス クリックが発生し、REST Web サービスから詳細が取得され、アイテム リストが非表示になります。問題は、ページを更新するまでアイテムの詳細が表示されないことです。私は自分が間違っていることをよく見ることができません。

これが私のコードの例です：

<html>
<head>
    <title>Backbone Test</title>
    <script type="text/javascript" src="js/lib/jquery-1.7.1-min.js"></script>
    <script type="text/javascript" src="js/lib/underscore-min.js"></script>
    <script type="text/javascript" src="js/lib/backbone-min.js"></script>
</head>

<body>

<div>VIN Search List:</div>
<div id="item-list" />
<div id="item-details" />

<script type="text/javascript">
$(function() 
{
    var Item = Backbone.Model.extend({
        urlRoot: "rest/search",
        defaults: {
            "uid": ""
        }
    });    

    var Items = Backbone.Collection.extend({
        model: Item,
        url: "rest/search/", 
    });

    var ItemDetail = Backbone.Model.extend({
        urlRoot: "rest/search/details",
        defaults: {
            "uid": "",
            "details": ""
        },

        url : function() {
            return this.id ? this.urlRoot + '/' + this.id : this.urlRoot;
        } 
    });    

    var ListView = Backbone.View.extend(
    {
        tagName: "ol",

        initialize: function() 
        {
            _.bindAll(this, 'render');
            this.model.bind("destroy", this.close, this);
        },

        render: function() 
        {
            _.each(this.model.models, function(uid) {
                $(this.el).append( new ItemView({model:uid}).render().el );
            }, this);  
            return this;
        },

        close: function() 
        {
            $(this.el).unbind();
            $(this.el).remove();
        },
    });

    var ItemView = Backbone.View.extend(
    {
        tagName: "li",

        template: _.template("<%= uid %>"),

        events: { "click": "showDetails" },

        initialize: function() 
        {
            _.bindAll(this, 'render');
            this.model.bind("change", this.render, this);
            this.model.bind("destroy", this.close, this);
        },

        render: function(eventName) 
        {
            $(this.el).html( this.template( this.model.toJSON() ) );
            return this;
        },

        close: function() 
        {
            $(this.el).unbind();
            $(this.el).remove();
        },

        showDetails: function() 
        {
            app.navigate("details/" + this.model.get("uid"), {trigger: true});
            return false;
        },
    });

    var DetailsView = Backbone.View.extend(
    {
        tagName: "ul",

        template: _.template("<li><%= uid %></li><li><%= details %></li>"),

        initialize: function() 
        {
            _.bindAll(this, 'render');
            this.model.bind("change", this.render, this);
            this.model.bind("destroy", this.close, this);
        },

        render: function(eventName) 
        {
            $(this.el).html( this.template( this.model.toJSON() ) );
            return this;
        },

        close: function() 
        {
            $(this.el).unbind();
            $(this.el).remove();
        },
    });

    var AppRouter = Backbone.Router.extend({

        routes:
        {
            "": "list",
            "details/:uid": "Details"
        },

        list: function() 
        {
            var self = this;
            this.itemList = new Items();
            this.itemList.fetch(
            {
                success: function() 
                {
                    self.listView = new ListView({model: self.itemList});
                    $('#item-list').html( self.listView.render().el );
                }
            });
        },

        Details: function(uid) 
        {
            if (this.lListView) this.listView.close();

            var self = this;
            this.details = new ItemDetail({id: uid});
            this.details.fetch(
            {
                success: function() 
                {
                    self.detailsView = new DetailsView({model: self.details});
                    $('#item-details').html( self.detailsView.render().el );
                }
            });
        },

    });

    // Start up
    var app = new AppRouter();
    Backbone.history.start();
});
</script>
4

1 に答える 1

0

#it​​em-details ではなく #item-list を変更するように Details ルートを変更すると、すべてが正しく動作します。

#it​​em-list はもともとデフォルト ルートで変更された要素だったので、その階層の外側にある要素を変更できないのではないでしょうか。私は本当にこの行動を理解したいです。

ぶらぶら。#it​​em-details 要素の表示を手動で切り替えて、要素を強制的にレンダリングする必要があるようです。デフォルト ルートの動作が異なる理由はまだわかりませんが、大きな問題ではありません。

        this.details.fetch(
        {
            success: function() 
            {
                self.detailsView = new DetailsView({model: self.details});
                $('#item-details').html( self.detailsView.render().el );
                $('#item-details').css( "display", "block" ); // FORCE DISPLAY
            }
        });
于 2013-01-02T19:28:09.903 に答える