骨干視圖：el和事件

Question

我正在嘗試使用Backbone，並且在Views方面遇到麻煩，尤其是在“ el”和事件方面。 我注意到我不是第一個，但是很遺憾找不到我的問題的最佳答案。

我的基本相關代碼：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="js/require.js"></script>
    </head>
    <body>
        <div id="login"></div>
    </body>
</html>

視圖：

var view = Backbone.View.extend({
        el: $("#login"),

        initialize: function() {
            this.el.html('<div>click here</div>');         // TypeError: this.el.html is not a function 
        }
.....

問題1：

請注意initialize（）函數中的注釋，這是我加載此代碼時Firebug注冊的錯誤。

但是，當我僅刪除“ el”配置，而是將相應的分配放入initialize（）時，運行時錯誤就消失了！

var view = Backbone.View.extend({
            //  "el" is now removed 

        initialize: function() {
            this.el = $("#login");                       // explicit assignement
            this.el.html('<div>click here</div>');       // appends the div correctly
        }
.....

問題2：在這兩個示例中，如果我在View的events config中指定事件，則該事件永遠不會觸發：

events: {
            "click":          "tryLogin"
          },
          ...

請賜教！ :)

Answer 1

您遇到的特定問題是this.el不是jQuery對象，並且沒有.html方法。 這就是this.$el this.el是原始的DOM元素，而this.$el是該對象的jQuery包裝版本。 您不應該使用jQuery選擇的元素覆蓋el 。

您遇到的真正問題是您試圖在initialize修改DOM。

如果在initialize ，要訪問DOM中已經存在的DOM元素，則需要將el:選項傳遞給視圖的構造函數。 通常，您不應該這樣做。 您的視圖應在其render方法中執行其DOM操作。

從文檔：

如果您想創建一個引用DOM中已經存在的元素的視圖，請將該元素作為選項傳遞： new View({el: existingElement})

在實踐中，我發現el和$el仍然可用，但是無論如何都應避免在initialize使用它們。 堅持修改render的DOM，這是您視圖的“繪圖”代碼所要使用的特定位置：

 var view = Backbone.View.extend({ el: '#login', render: function () { this.$el.append('<h1>What!</h1>'); return this; } }); $(function () { new view().render(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> <div id="login"></div>

關於問題2，我無法重提您的問題。 以下內容完全符合預期：

 var View = Backbone.View.extend({ el: '#login', events: { 'click': 'onClick' }, onClick: function () { alert('click!'); }, render: function () { this.$el.append('<h1>What!</h1>'); } }); new View().render();

  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script> <div id="login"></div>

骨干視圖：el和事件

問題描述

1 個解決方案

解決方案1
2 2015-01-29 13:53:45

骨干視圖：el和事件

問題描述

1 個解決方案

解決方案1 2 2015-01-29 13:53:45

解決方案1
2 2015-01-29 13:53:45