Question

非常简单的测试应用程序，但由于某种原因，模板不呈现，到目前为止我只尝试一个模板。只显示空白页面。没有错误

  // 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>

Answer 1

您实际上并未将View的el附加到DOM。您甚至不会调用视图实例的render方法。您可以在初始化时进行，即在initialize方法中或在创建实例后。

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

编辑：我刚刚注意到您正在将选择器传递给视图（el: '#nested-viewer'）。这意味着只需要调用render方法作为DOM中存在的元素。

Backbonejs应用程序不会退出视图

1 个答案: