backbone js - 動態加載視圖：應該是啓動器，還是應該由父視圖啓動？

我有一個關於動態加載視圖元素上的el標籤的問題。我將一個點擊偵聽器附加到一個<a>標籤上，該標籤將動態加載視圖元素（從模板渲染它，通過ajax填充某些內容等）。現在，如下我目前已經實現了它：backbone js - 動態加載視圖：應該是啓動器，還是應該由父視圖啓動？

MyDynamicView = Backbone.View.extend({ 
    el: "a#dynamic-launcher", 
    events: { 
     "click": "launch" 
    }, 
    initialize: function(){ 
     _.bindAll(this, "render"); 
    }, 
    launch: function(e){ 
     e.preventDefault(); 
     this.render(); 
    }, 
    render: function(){ 
        // do template/ajax/whatever. 
    } 
});

其中一期工程還算不錯，但是它是從做一些事情阻止我。例如，如果我想添加另一個事件，這是由我的新動態視圖中的某個事件觸發的，我無法這樣做（因爲事件僅顯示在父項el的下面）。

所以另一種方法可能是擁有一個父視圖，該視圖知道哪個元素啓動動態元素，然後創建/呈現它。

velo.AppView = Backbone.View.extend({ 
    el: "body", 
    events: { 
     "click a#dynamic-launcher": "launchDynamicView" 
    }, 
    launchDynamicView: function(e){ 
     e.preventDefault(); 
     new MyDynamicView(); // Or something - Maybe I need to call render. Not sure. 
    } 
});

這第二種技術更有意義嗎？

任何指導將是偉大的！

謝謝。

來源

2011-05-24 idbentley

最簡單的解決辦法是讓

MyDynamicView = Backbone.View.extend({ 
    el: "div", 
    events: { 
     "click a#dynamic launcher": "launch" 
    }, 
    initialize: function(){ 
     _.bindAll(this, "render"); 
     el.append($("<a></a>", { 
      id: "#dynamic-launcher" 
     })); 
    }, 
    launch: function(e){ 
     e.preventDefault(); 
     this.render(); 
    }, 
    render: function(){ 
     // render link again? 
     // do template/ajax/whatever. 
    } 
});

你的觀點應該包含的鏈接，而不是是的鏈接。

來源

2011-05-24 20:14:56 Raynos

這不是我要找的，但 - 這將啓動視圖可以從頁面完全不同的部分鏈接觀點最終呈現的是什麼。該鏈接應該在呈現視圖之前呈現。 – idbentley 2011-05-24 20:26:27

@idbentley啊。然後你需要附加某種'Controller'來連接鏈接/按鈕，並在某個地方生成一個新的'View'對象。感覺像一個'View' - >'Controller' - >'View'關係，而不是'ParentView' - >'ChildView' – Raynos 2011-05-24 20:31:59

您似乎沒有按照預期使用主幹視圖。你將一個事件綁定到一個＃動態啓動器，但是這個元素不是定義這個事件綁定的視圖的一部分。你對AppView的第二次嘗試更好。

當然，實現取決於您的應用程序的目標，但也許這樣的事情是你所需要的：

初始啓動HTML頁面框架：

<html> 
     <head><!-- include your javascript --></head> 
     <body></body> 
</html>

應用數據視圖

AppView 
    events: { 
     "click a#dynamiclauncher" : "launch" 
    } 
    render: function(){ 
     $('body').html $(el).html(this.template()) 
    } 
    launch: function(){ 
     $(el).find('.dynamic-view-location').html new DynamicView.render().el 
    }

相應的AppTemplate

<p> 
    Hello world 
    <a id="dynamic-launcher">Launch Dynamic View</a> 
    <div class=".dynamic-view-location"></div> 
</p>

動態視圖

DynamicView 
    render: function(){ 
     $(this.el).html(this.template()) 
    }

相應的動態視圖模板

來源

2011-05-25 21:15:04 34m0

這基本上就是我在第二種情況下做的，除了我想從動態視圖構建發佈時間的模板，而不是渲染時間。我還要指出，你可以使用'this。$（'selector'）'來選擇相對於當前視圖（而不是'$（el）.find（selector）'。我同意這比我最初提出的更正確，但我沒有看到它爲我的第二個提案增加了什麼。 – idbentley 2011-05-25 21:25:31

AppView的啓動時間是動態視圖的渲染時間。直到該鏈接被點擊後，纔會生成動態視圖的html！ – 34m0 2011-05-25 21:37:06

感謝您對此提示。$（'selector'）。將來會用到這個！ – 34m0 2011-05-25 21:46:58

backbone js - 動態加載視圖：應該是啓動器，還是應該由父視圖啓動？

回答

相關問題