Javascript 主干视图未正确更新_Javascript_Backbone.js

Javascript 主干视图未正确更新

javascript backbone.js

Javascript 主干视图未正确更新,javascript,backbone.js,Javascript,Backbone.js,我想显示一个列表，一旦单击列表中的某个项目，我想隐藏该列表，并检索和显示该项目的详细信息单击鼠标将激发，从RESTWeb服务检索详细信息，并且项目列表将隐藏。问题是，在我刷新页面之前，项目详细信息不会显示。我不太明白我做错了什么下面是我的代码示例： <html> <head> <title>Backbone Test</title> <script type="text/javascript" src="js/lib/jq

我想显示一个列表，一旦单击列表中的某个项目，我想隐藏该列表，并检索和显示该项目的详细信息

单击鼠标将激发，从RESTWeb服务检索详细信息，并且项目列表将隐藏。问题是，在我刷新页面之前，项目详细信息不会显示。我不太明白我做错了什么

下面是我的代码示例：

<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>


主干测试
VIN搜索列表：
$（函数（）
{
var Item=Backbone.Model.extend({
urlRoot:“rest/search”，
默认值：{
“uid”：”
}
});    
var Items=Backbone.Collection.extend({
型号：项目，
url:“rest/search/”，
});
var itemdail=Backbone.Model.extend({
urlRoot:“rest/search/details”，
默认值：{
“uid”：“，
“详细信息”：”
},
url:function（）{
返回this.id？this.urlRoot+'/'+this.id:this.urlRoot；
} 
});    
var ListView=Backbone.View.extend(
{
标记名：“ol”，
初始化：函数（）
{
_.bindAll（这是“呈现”）；
this.model.bind（“destroy”，this.close，this）；
},
render:function（）
{
_.each（this.model.models，function（uid）{
$（this.el）.append（新项目视图（{model:uid}）.render（）.el）；
}，这个）；
归还这个；
},
关闭：函数（）
{
$（this.el）.unbind（）；
$（this.el）.remove（）；
},
});
var ItemView=Backbone.View.extend(
{
标记名：“li”，
模板：u.template（“”），
事件：{“单击”：“显示详细信息”}，
初始化：函数（）
{
_.bindAll（这是“呈现”）；
this.model.bind（“change”，this.render，this）；
this.model.bind（“destroy”，this.close，this）；
},
渲染：函数（eventName）
{
$（this.el）.html（this.template（this.model.toJSON（））；
归还这个；
},
关闭：函数（）
{
$（this.el）.unbind（）；
$（this.el）.remove（）；
},
showDetails:function（）
{
app.navigate（“details/”+this.model.get（“uid”），{trigger:true}）；
返回false；
},
});
var DetailsView=Backbone.View.extend(
{
标记名：“ul”，
模板：u.template（“
”），
初始化：函数（）
{
_.bindAll（这是“呈现”）；
this.model.bind（“change”，this.render，this）；
this.model.bind（“destroy”，this.close，this）；
},
渲染：函数（eventName）
{
$（this.el）.html（this.template（this.model.toJSON（））；
归还这个；
},
关闭：函数（）
{
$（this.el）.unbind（）；
$（this.el）.remove（）；
},
});
var AppRouter=Backbone.Router.extend({
路线：
{
“：”列表“，
“details/：uid”：“details”
},
列表：函数（）
{
var self=这个；
this.itemList=新项目（）；
此文件为.itemList.fetch(
{
成功：函数（）
{
self.listView=新的listView（{model:self.itemList}）；
$（'#项列表'）.html（self.listView.render（）.el）；
}
});
},
详细信息：函数（uid）
{
如果（this.lListView）this.listView.close（）；
var self=这个；
this.details=新的ItemDetail（{id:uid}）；
this.details.fetch(
{
成功：函数（）
{
self.detailsView=newdetailsview（{model:self.details}）；
$（'#item details'）.html（self.detailsView.render（）.el）；
}
});
},
});
//启动
var app=新批准者（）；
Backbone.history.start（）；
});

如果我将详细信息路由更改为修改#项目列表而不是#项目详细信息，则一切正常

我猜既然#item list是默认路由中最初修改的元素，我就不能修改位于其继承权之外的元素了？我真的很想了解这种行为

废话。看起来我只需手动切换#item 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
            }
        });

触发详细信息路由时，直到刷新页面后，才会呈现DetailsView。是的，调用success。