如何在骨干.js中設置另一個視圖對象

Question

我的應用程序設計為先更改路由器再渲染其他視圖，但是我不知道如何通信來創建其他視圖對象。

router.js

    var app = app || {};
(function() {
    'use strict';
    var views = app.view = app.view || {};
    app.Router = Backbone.Router.extend({
        routes: {
            '*home': 'homeRoute',
            'about': 'aboutRoute',
            'contact': 'contactRoute'
        },
        initialize: function() {
            // create the layout once here
            this.layout = new views.Application({
                el: 'body',
            });
        },
        homeRoute: function() {
            var view = new views.Home();
            this.layout.setContent(view);
        },
        aboutRoute: function() {
            var view = new views.About();
            this.layout.setContent(view);
        },
        contactRoute: function() {
            var view = new views.Contact();
            this.layout.setContent(view);
        }
    });
})();

view.js

var app = app || {};
(function() {
    'use strict';
    //views linitalize
    var views = app.view = app.view || {};
    views.Application = Backbone.View.extend({
        initialize: function() {
            // caching the jQuery object on init
            this.$content = this.$('#content');
            this.$loading = this.$('#loading');
        },
        setContent: function(view) {
            var content = this.content;
            if (content) content.remove();
            this.showSpinner();
            content = this.content = view;
            console.log(view);
            //content rednering
            this.$content.html(content.render().el, this.hideSpinner());
        },
        showSpinner: function() {
          this.$loading.show();
        },
        hideSpinner: function() {
          this.$loading.hide();
        },
    });
    views.Home = Backbone.View.extend({ });
    views.About = Backbone.View.extend({
      initialize: function(){
        this.render();
      },
      render: function(){
        var template =  _.template("<strong>About page</strong>");
      }
    });
    views.Contact = Backbone.View.extend({
      my_template: _.template("<strong>Contact page</strong>");
    });
})();

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul class="pills">
        <li><a href="#/">Home</a></li>
        <li><a href="#/about">About</a></li>
        <li><a href="#/contact">Contact</a></li>
    </ul>
    <div id="content"></div>
    <div id="loading">load the page...</div>
    <div id="sumMenu"></div>
    <script src="lib/jquery-3.1.1.min.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/backbone.js"></script>
    <script src="lib/backbone.localstorage.js"></script>
    <script src="routers/router.js" ></script>
    <script src="views/view.js" ></script>
    <script src="views/app.js" ></script>
  </body>
</html>

如果您看一下這段代碼，就會明白。 我上面所說的很難傳達。

看一下view.js ，我寫了3個views屬性（ home ， about ， contact ）和那些包含無法運行的代碼。

my_template: _.template("<strong>Contact page</strong>");

我真的很想知道在創建對象之后，如何設置對象的值和渲染？

Answer 1

該代碼的靈感很大程度上來自於我的其他答案，但是您需要閱讀Backbone文檔（以及Underscore的文檔）以了解正在發生的事情 ，正在做什么以及需要做什么才能為其添加功能。 否則，您將始終從工作代碼中移入一個您不理解的新混亂中。

Backbone文檔簡短而優美，源代碼中充滿了注釋。 不要閱讀Underscore的所有文檔，但至少請閱讀您正在使用的功能的文檔（例如_.template ）。

路由器`routes`

由於您從其他答案中復制粘貼了確切的代碼，而沒有先檢查它是否有效，因此您復制了我犯的一個錯誤。 應該先定義更具體的路由，然后才定義所有路由 。

routes: {
    'about': 'aboutRoute',
    'contact': 'contactRoute',
    // put the catch-all last
    '*home': 'homeRoute',
},

實例化新路由器時，其構造函數調用_bindRoutes來解析從最后一個到第一個的路由。

 _bindRoutes: function() { if (!this.routes) return; this.routes = _.result(this, 'routes'); var route, routes = _.keys(this.routes); while ((route = routes.pop()) != null) { this.route(route, this.routes[route]); } },

以后添加的路由可能會覆蓋先前聲明的路由。

`render`功能

您認為以下內容會做什么？

render: function(){
    var template =  _.template("<strong>About page</strong>");
}

因此，現在要做的就是：

它創建了一個新功能，
將其放在名為template的局部變量中
什么也別做。

甚至這個：

my_template: _.template("<strong>Contact page</strong>");

my_template上的my_template屬性不是標准的Backbone，因此，如果您不對其進行任何操作，則它本身不會做任何事情。

要理解，您需要知道_.template函數將模板字符串作為參數（以及可選的設置對象），並返回一個新的預編譯模板函數 ，該函數將對象作為參數。 （更多信息和示例）

骨干視圖的render功能留給開發人員覆蓋。 理想情況下，它應該呈現出東西並且是冪等的。

一個簡單的視圖可能是：

views.About = Backbone.View.extend({
    template: _.template("<strong>About page</strong>"),
    render: function() {
        this.$el.html(this.template());
        return this;
    }
});

一個好的約定是在render結束時return this以啟用鏈接調用。

您應該這樣做，因為要在代碼中鏈接調用：

content.render().el

jQuery和`el`

你為什么要傳遞this.hideSpinner() ？

this.$content.html(content.render().el, this.hideSpinner());

盡管確實使用視圖的el更改了#content div的HTML，但使用this.hideSpinner()返回的值作為第二個參數毫無意義。

jQuery的.html函數僅采用一個參數。

在哪里放置裝載微調器？

不在同步DOM操作之內。 放置一個微調框，將其刪除之前沒用。

當進行某種異步加載 ，並且您想通知用戶頁面沒有崩潰或凍結時，加載微調器才有意義 。

假設您要加載主頁新聞。

homeRoute: function() {
    console.log("showing the spinner");
    this.layout.showSpinner();

    var collection = new Backbone.Collection({
            url: "/you/api/url/for/latest/news" // simple example
        }),
        view = new views.Home({
            collection: collection
        });

    collection.fetch({
        context: this,
        success: function() {
            console.log("removing the spinner");
            this.layout.hideSpinner();
            this.layout.setContent(view);
        }
    });

    console.log("End of homeRoute function");
},

在控制台中，您將按以下順序查看日志：

showing the spinner
End of homeRoute function
removing the spinner

有關更多信息，請參見：

如何在骨干.js中設置另一個視圖對象

問題描述

1 個解決方案

解決方案1
2 已采納 2016-12-17 23:31:01

路由器`routes`

`render`功能

jQuery和`el`

在哪里放置裝載微調器？

如何在骨干.js中設置另一個視圖對象

問題描述

1 個解決方案

解決方案1 2 已采納 2016-12-17 23:31:01

路由器routes

render功能

jQuery和el

在哪里放置裝載微調器？

解決方案1
2 已采納 2016-12-17 23:31:01

路由器`routes`

`render`功能

jQuery和`el`