Backbone.js如何創(chuàng)建一個簡單的視圖？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

公司主營業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出臨澧免費做網(wǎng)站回饋大家。

示例1：

代碼如下

創(chuàng)建以下HTML文件。

  
  
   
  
  
  


  
Header
  

  
Footer

說明：

 var CView = Backbone.View.extend({
  });

上面的代碼成為視圖的對象。在此代碼中，沒有實現(xiàn)任何內(nèi)容。

 var mView = new CView;
  $('#output').append(mView.el);

我們創(chuàng)建視圖的對象，并將視圖對象的el屬性添加到輸出id的標記元素。

運行結(jié)果

在Web瀏覽器中顯示HTML文件時，將顯示如下效果。似乎沒有顯示任何內(nèi)容。

當確認HTML的輸出時，您可以看到div標簽被添加到id =“output”的div標簽內(nèi)。雖然頁面上沒有顯示字符串，但可以確認視圖的視圖元素在頁面反映出來了。

示例2：字符串顯示的view

為可以顯示字符串而實現(xiàn)View。

代碼如下

編寫以下HTML文件。

    
    
   
  
  
  


  
Header
  

  
Footer

參考：它也適用于以下代碼。

$(function () {
      var CView = Backbone.View.extend({
              render: function () {
                        this.$el.text('Hello World!');          
                        return this;
        }
      });
      var mView = new CView;
      mView.render();
      $('#output').append(mView.el);
    });

說明：

描述render方法中的渲染實現(xiàn)。要輸出到HTML的標記設(shè)置為el object。el的jquery對象可以用作$ el。由于此代碼使用jquery，我們使用$ el而不是el。調(diào)用text方法并將字符串“Hello World！”設(shè)置為el對象。

var CView = Backbone.View.extend({
    render: function () {      
    this.$el.text('Hello World!');      
    return this;
    }
  });

為視圖創(chuàng)建一個對象。調(diào)用render（）方法進行頁面顯示。通過執(zhí)行render方法，將字符串“Hello World！”設(shè)置為el屬性，并且可以準備頁面顯示內(nèi)容。
然后，它在一個元素中顯示el屬性的內(nèi)容，其值為id。el屬性可以引用視圖對象的el屬性，并且可以通過引用作為render（）方法的返回值返回的View對象的el屬性來獲得相同的結(jié)果。

var mView = new CView;
  $('#output').append(mView.render().el);

或者，

var mView = new CView;
  mView.render();
  $('#output').append(mView.el);

運行結(jié)果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。頁面上顯示字符串“Hello World！”。

當您檢查HTML的輸出時，可以看到div標簽被添加到id =“output”的div標簽內(nèi)，并且字符串“Hello World！”被寫入其中。

看完上述內(nèi)容，你們掌握Backbone.js如何創(chuàng)建一個簡單的視圖的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！