Backbonejs應用程序不會渲染視圖

非常簡單的測試應用程序，但由於某種原因，該模板不是渲染，到目前爲止，我只嘗試一個模板。只顯示空白頁面。沒有錯誤Backbonejs應用程序不會渲染視圖

// The Application 
    // --------------- 

    // Our overall **AppView** is the top-level piece of UI. 
    app.AppMainView = Backbone.View.extend({ 

    // Instead of generating a new element, bind to the existing skeleton of 
    // the App already present in the HTML. 
    el: '#nested-viewer', 

    view1Template: _.template($('#view1').html()), 
    view2Template: _.template($('#view2').html()), 
    view3Template: _.template($('#view3').html()), 

    // New 
    // Delegated events for creating new items, and clearing completed ones. 
    events: { 
     'keyup [nv-data="myinput"]': 'changedData', 
    }, 

    // At initialization we bind to the relevant events on the `Todos` 
    // collection, when items are added or changed. Kick things off by 
    // loading any preexisting todos that might be saved in *localStorage*. 
    initialize: function() { 
     console.log("init") 
     this.dataStorage1=new app.dataStorage(); 
     console.log(this.dataStorage1) 
     // this.listenTo(app.Fund, 'change',this.adjustAllDivison); 
    }, 

    // New 
    // Re-rendering the App just means refreshing the statistics -- the rest 
    // of the app doesn't change. 
    render: function() { 
     this.$el.html(this.view1Template()); 
    }, 


    changedData: function(){ 
     console.log("changedData"); 

    }, 

    resetAllDivison: function(){ 
     console.log("resetAllDivison") 
    }, 

    }); 


// js/app.js 

var app = app || {}; 

$(function() { 

    // Kick things off by creating the **App**. 
    new app.AppMainView(); 

});

的index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>Nested View</title> 
    <link rel="stylesheet" href="src/app/style.css"> 
    <link rel="stylesheet" href="/library/dragdealer/0.9.8/css/dragdealer.css"> 
</head> 
<body> 
    <div id="nested-viewer"> 

    </div> 


    <!-- Templates --> 
    <script type="text/template" id="view1"> 
    <div class="view1s"> 
     <input nv-data="myinput" type="text" id="input1" name="" value="123" placeholder=""> 
    </div> 
    </script> 

    <script type="text/template" id="view2"> 
    <div class="view2s"> 
     <p id="display2">View 2 </p> 
    </div> 
    </script> 

    <script type="text/template" id="view3"> 
    <div class="view3s"> 
     <p id="display3">View 3</p> 
    </div> 
    </script> 




    <!-- Loading Templates + Vendor Scripts --> 
    <script type="text/template" id="item-template"></script> 
    <!-- Addons --> 
    <script src="/library/dragdealer/0.9.8/js/dragdealer.js"></script> 
    <!-- Main Framework --> 
    <script src="src/assets/lib/jquery.js"></script> 
    <script src="src/assets/lib/underscore.js"></script> 
    <script src="src/assets/lib/backbone.js"></script> 
    <script src="src/assets/lib/backbone.localStorage.js"></script> 

    <!-- Modules --> 
    <!-- Main --> 
    <!-- Nested View --> 

     <script src="src/app/modules/NestedView/models/dataStore.js"></script> 
     <script src="src/app/modules/NestedView/views/AppMainView.js"></script> 
     <!-- 
     <script src="src/app/modules/NestedView/views/view1.js"></script> 
     <script src="src/app/modules/NestedView/views/view2.js"></script> 
     <script src="src/app/modules/NestedView/views/view3.js"></script> 
     --> 

    <!-- App Base --> 
    <script src="src/app/router.js"></script> 
    <script src="src/app/app.js"></script> 






</body> 
</html>

來源

2015-07-01 Ezeewei

你居然沒有附加視圖的el到DOM。你甚至不會調用視圖實例的render方法。您可以在初始化時執行此操作，即在您的initialize方法中或創建實例後執行。

var mainView = new app.AppMainView(); 
mainView.render(); 
mainView.$el.appendTo(document.body);

編輯：剛纔我注意到您選擇傳遞給視圖（el: '#nested-viewer'）。這意味着只需要調用render方法，因爲元素存在於DOM中。

來源

2015-07-01 16:19:05 undefined

現在我收到Uncaught RangeError：通過應用這兩行超出最大調用堆棧大小。想知道爲什麼？ – Ezeewei

Backbonejs應用程序不會渲染視圖

回答

相關問題