溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Backbone.js如何創(chuàng)建一個簡單的視圖

發(fā)布時間：2020-07-20 10:39:59 來源：億速云 閱讀：178 作者：Leah 欄目：web開發(fā)

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

示例1：

代碼如下

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="jquery-3.2.1.js"></script> 
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
    $(function () {
      var CView = Backbone.View.extend({
      });      
      var mView = new CView;
      $('#output').append(mView.el);
    });  
</script>
</head>
<body>
  <div>Header</div>
  <div id="output"></div>
  <div>Footer</div>
</body>
</html>

說明：

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

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

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

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

運行結(jié)果

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

Backbone.js如何創(chuàng)建一個簡單的視圖

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

示例2：字符串顯示的view

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

代碼如下

編寫以下HTML文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script src="jquery-3.2.1.js"></script> 
  <script src="underscore.js"></script>
  <script src="backbone.js"></script>
  <script type="text/javascript">
    $(function () {
      var CView = Backbone.View.extend({
        render: function () {
          this.$el.text('Hello World!');
          return this;
        }
      });
      var mView = new CView;
      $('#output').append(mView.render().el);
    });
  </script>
</head>
<body>
  <div>Header</div>
  <div id="output"></div>
  <div>Footer</div>
</body>
</html>

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

$(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的標(biāo)記設(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屬性，并且可以準(zhǔn)備頁面顯示內(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！”。

Backbone.js如何創(chuàng)建一個簡單的視圖

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

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

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手