个人中心
gpt4 book ai didi

javascript - 如何在backbone.js中设置另一个 View 对象

转载 作者：行者123 更新时间：2023-12-02 13:48:08 25 4
gpt4 key购买 nike

我的应用程序设计为更改路由器然后渲染其他 View 但是，我不知道如何通信创建其他 View 对象。

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>");

我很想知道对象创建后，如何设置对象值和渲染？

最佳答案

该代码很大程度上受到 my other answer 的启发，但您需要阅读Backbone documentation (以及 Underscore's )了解正在发生的事情、您正在做什么以及需要做什么来向其添加功能。否则，您总是会偏离工作代码，陷入您不理解的新困惑之中。

Backbone 文档简短而有趣，source code充满了评论。不要阅读 Underscore 的所有文档，但至少要阅读您正在使用的函数的文档(例如 _.template )。

<小时/>

Router routes

由于您复制粘贴了我其他答案中的确切代码，而没有先检查它是否有效，因此您复制了我犯的错误。 应首先定义更具体的路由，最后定义包罗万象的路由。

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

当实例化一个新的 Router 时，它的构造函数调用 _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]);
  }
},

Routes added later may override previously declared routes.

<小时/>

render function

您认为以下内容会做什么？

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

所以现在要做的是:

  • 它创建了一个新函数，
  • 将其放入名为template的局部变量
  • 不做任何其他事情。

甚至是这个:

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

my_template View 上的属性不是标准 Backbone，因此如果您不对其执行任何操作，它本身也不会执行任何操作。

要理解，您需要知道 Underscore _.template 函数将模板字符串作为参数(以及可选的设置对象)并返回一个新的预编译模板函数，它接受一个对象作为参数。 ( More info and examples )

Backbone View 的 render 函数留给开发人员重写。理想情况下它应该渲染一些东西并且是 idempotent .

一个简单的 View 可以是:

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

A good convention is to return this at the end of render to enable chained calls.

您应该这样做，因为您在代码中链接调用:

content.render().el
<小时/>

jQuery 和 el

为什么要传递this.hideSpinner()？

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

虽然它确实使用 View 的 el 更改了 #content div 的 HTML，但使用 this.hideSpinner() 返回值作为第二个参数没有意义。

<强> jQuery's .html function仅采用一个参数。

<小时/>

在哪里放置加载旋转器？

不在同步 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

更多信息，请参见:

关于javascript - 如何在backbone.js中设置另一个 View 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41196935/

25 4 0
文章推荐： javascript - 将某些数据设置为第一个 Child "data-id"属性？
文章推荐： delphi - 德尔福的一年中的一天
文章推荐： haskell - getLine 和 readLn 之间的区别
文章推荐： javascript - 如何在php中解析json数组数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com