私の髪の毛を引っ張っていますが、私が最もばかげたことをしない限り、ビューが再レンダリングされた後、バックボーン・ビュー・イベントは再レンダリング後には機能しません
$("a").die().unbind().live("mousedown",this.switchtabs);
私は実際にそこでこれを持っていたが、最新のバックボーンに更新し、新しいdelegateEvents()
機能を使用しようとすることを決めました。
Appview/AppRouter
|
----->PageCollection
|
------->PageView/PageModel
------->PageView/PageModel these page view/models are not rendered
------->PageView/PageModel
|
------->PageView/PageModel
|
----->render() *when a pageview is rendered*
|
-----> Creates new
Tabcollection
|
--->TabModel/TabView <-- this is where the issue is
が、その後、各タブの新しいモデル/ビューを作成します:ここで
は私のプロジェクトIDが構造化された方法でありますリスナーを使用して、タブがロードされるたびにタブビューを再描画します。タブビューが再レンダリングされた場合、そこに作成されたjQueryステートメントを置かない限り、マウスイベントはもう機能しません。彼らはDOMではないので相続人tabviewとレンダリング(かなりそれをストリップダウンアイブ)
var TabPanelView = Backbone.View.extend({
className: "tabpanel",
html: 'no content',
model: null,
rendered: false,
events:{
'click a.tab-nav': 'switchtabs'
},
initialize: function(args)
{
this.nav = $("<ol/>");
this.views = args.items;
this.className = args.classname?args.classname:"tabpanel";
this.id = args.id;
this.container = $("<section>").attr("class",this.className).attr("id",this.id);
_.bindAll(this);
return this.el
},
/*
This render happens multiple times, the first time it just puts an empty html structure in place
waiting for each of the sub models/views to load in (one per tab)
*/
render: function(args){
if(!args)
{
//first render
var nav = $("<aside/>").addClass("tab-navigation").append("<ol/>").attr("role","navigation");
var tabcontent = $("<section/>").addClass("tab-panels");
for(i = 0;i<this.views.length;i++)
{
$("ol",nav).append("<li><a rel='"+this.views[i].id+"' href='javascript:;' class='tab-nav'></a></li>");
tabcontent.append(this.views[i].el);
}
this.$el.empty().append(nav).append(tabcontent);
}
else if(args && args.update == true){
// partial render -- i.e. update happened inside of child objects
var targetid = args.what.cid;
for(i = 0;i<this.views.length;i++)
{
var curcontent = this.$el.find("div#"+this.views[i].id);
var curlink = this.$el.find("a[rel='"+this.views[i].id+"']")
if(this.views[i].cid == targetid)
{
curcontent.html($(this.views[i].el).html());
curlink.text(this.views[i].model.rawdata.header);
}
if(i>0)
{
// set the first panel
curcontent.addClass("tab-content-hide");
}
if(i==0)
{
curcontent.addClass("tab-content-show");
curlink.addClass("tab-nav-selected");
}
// this ridiculous piece of jQuery is the *ONLY* this i've found that works
//$("a[rel='"+this.views[i].id+"']").die().unbind().live("mousedown",this.switchtabs);
}
}
this.delegateEvents();
return this;
},
switchtabs: function(args){
var tabTarget = args.target?args.target:false
if(tabTarget)
{
this.$el.find("aside.tab-navigation a").each(function(a,b)
{
$(this).removeClass("tab-nav-selected")
})
$(tabTarget).addClass("tab-nav-selected");
this.$el.find("div.tab-content-show").removeClass("tab-content-show").addClass("tab-content-hide");
this.$el.find("div#"+tabTarget.rel).removeClass("tab-content-hide").addClass("tab-content-show");
}
}
});
は、誰もがバックボーンマウスイベントは、単にすべてで解雇しない理由を考えることができ、それがあります?私はこれがバックボーンが特に有用だった場所だと思ったのですが... ...
これまでのトラブルシューティングの手順を教えてください。私が試してみたいことのいくつか: 'events'要素が処理されるバックボーンソースにブレークポイントを設定できるかどうかを見てください。あなたにいくつかの洞察力を与えるかもしれません。また、ChromeのDOMおよびイベントリスナーのブレークポイントを使用してみてください。これは、コードがまったく実行されているかどうか、またはイベントがワイヤリングアップしていないかどうかを確認するのに役立ちます。 –
Iveはjq $(document).find( "tab-nav-selected")に対してログを取って、レンダリングされた項目が実際にdomにあるかどうかを確認します。私自身のコードでブレークポイントを通過しました。デバッガでバックボーン自体を掘り起こすのに十分な自信がありません。スコープはすべてうまく見えます...私は確信はしていませんが、イベントは再レンダリングのために上書きされているかのように見えます... ummm – Alex