Question

我的应用程序中发生一个非常奇怪的问题。我正在使用骨干JS框架，并根据另一个来加载屏幕。下面以URL生成为例来说明我的问题，正在加载屏幕，并且正在逐一形成URL。但是，当我直接创建相同的URL并点击浏览器时，屏幕不会加载。我需要这个，因为我们想将一个屏幕链接到另一个屏幕

例如：首先，根据父代ID加载父项，根据子代加载子项。

下面是URL的构成。

https://example.com/#/parent-detail/xxx?child1=xxx&child2=xxx&child3=xxxxxxx&child4=xxxxxxxxxxxxx

在上面的URL中，每个孩子的ID彼此依赖。

当我想使用此URL链接最后一个孩子时，则不会通过该特定页面。

但是，当我通过逐个单击每个孩子进入页面时，它将加载受人尊敬的孩子页面。

请帮助我，如何使用URL链接最后一个孙代。

我正在使用以下技术堆栈：

Backbone JS & Javascript - For Frontend
Node JS - for backend
Mysql - database
MongoDB -  database
Redis server - caching
HTML5 & CSS3 - design

编辑

这是我在前端页面上形成URL的方式 dahboard.html ：

<a href="#/parent-detail_2/<%= child[0].parent_id %>?s=<%= child[0].child1 %>&child2=<%= child[0].child2 %>&child3=<%= child[0]._id %>"><span></span> <b><%= child[i].child[0].name %></b></a>

此网址是由我在信息中心中使用的上述代码组成的。

这是我来自 routes.js 的应用程序路由：

 routes:{

        "dashboard"                                     : "dashboard",
        "dashboard/parent/:id"                           : "dashboard_parent",
        "signup"                                        : "signup",
        "forgotpassword"                                : "forgotpassword",
        "change-password/:token"                        : "resetpassword",
        "login"                                         : "login", 
        "logout"                                        : "logout",
        "parents/"                                       : "parents",
        "parent-detail/:id"                              : "parent_detail",
        "parent-detail_1/:id"                            : "parent_detail_1",
        "parent-detail_2/:id"                            : "parent_detail_2",
        "verify_user/:token"                            : "verifyEmail"
}

这是卡特代码：

window.ParentView = Backbone.View.extend({
    el: "#content2",
    initialize: function() {
        this.render();
    },
    render: function() {
        var self = this;
        // $('body').attr('class', 'fixed-topbar fixed-sidebar theme-sdtl color-default dashboard');

        $.get(BASEURL + "template/parents/parents.html", function(html) {
            var template = _.template(html);
            var vars = {username: window.localStorage.getItem('username') };
            html = template(vars);
            self.$el.html(html);
        });
    },

});

var ParentTabsView = Backbone.View.extend({
    el: '#parents-tabs',
    props: {},

    initialize: function(params) {
        // console.log(params);
        if(params && params.sharedParentModel) {
            this.sharedParentModel = params.sharedParentModel
        }
        //console.log(this.sharedParentModel);
    },
    renderChat: function(parent) {
        var _this = this;
        $.get(BASEURL + "template/parents/right_section/chat.html", function(html) {
            $(parent).html(html);
        });
    },
    renderTasks: function(parent, activity_id) {
        this.sharedParentModel.activity_id = activity_id;
        var _this = this;
        $.get(BASEURL + "template/parents/right_section/tasks_layout.html", function(html) {
            var template = _.template(html);
            $(parent).html(template());
        }).done(function() {
            new TasksView({sharedParentModel: _this.sharedParentModel}).load_data_and_render();
        });
    },
    renderInvitePeople: function(parent) {
        this.clearIt(parent);
        $(parent).append(new InvitePeopleView({sharedParentModel: this.sharedParentModel}).render().el);
    },
    renderShowInvitedPeople: function(parent) {
        this.clearIt(parent);
        $(parent).append(new ShowInvitedPeopleView({sharedParentModel: this.sharedParentModel}).render().el);
    },
    renderTeam: function(parent) {
        var _this = this;
        // console.log(this.sharedParentModel);

        this.clearIt(parent);
        $(parent).append(new TeamListParentView({sharedParentModel: this.sharedParentModel}).render().el);
    },
    renderTasksInfoChat: function(parent) {
        this.clearIt(parent);

        var outerTemplate = crel('div', {class: 'row'});
        var promiseOne = new Promise(function(resolve, reject) {
            $.get(BASEURL + "template/parents/right_section/task_info.html")
                .done(function(html) { resolve(html); })
                .fail(function(err) { reject(err)});
        });
        var promiseTwo = new Promise(function(resolve, reject) {
            $.get(BASEURL + "template/parents/right_section/chat.html")
                .done(function(html) { resolve(html); })
                .fail(function(err) { reject(err); });
        });

        Promise.all([promiseOne, promiseTwo]).then(function(values) { 
            var view = _.map(values, function(dom) { $(outerTemplate).append(dom); });
            $(parent).append(outerTemplate);
        });
    },
    clearThem: function(parents) {
        var _this = this;
        _.each(parents, function(parent) {
            $(parent).empty();
        })
    },
    clearIt: function(parent) {
        $(parent).empty();
    },
    destroy_view: function() {
        // COMPLETELY UNBIND THE VIEW
        this.undelegateEvents();
        this.$el.removeData().unbind(); 
        // Remove view from DOM
        this.remove();  
        Backbone.View.prototype.remove.call(this);
    },
    set_params: function(params) {
        if(params && params.sharedParentModel) {
            this.sharedParentModel = params.sharedParentModel
        }
    },
});

这是怎么了。

请帮助。预先感谢。

Answer 1

因此，基本上，我们找到了解决此问题的方法。我们已在父视图中加载了最后一个未直接加载的子级。因此，对于加载了每个孩子的孩子，请使用以下代码通过在一定间隔内设置点击触发器。

renderChild:function(e){
    var child_id = $(e.target).closest('.renderChild').attr('child-id');
    var renderChildTimer = setInterval(function(){
        if (document.getElementById(task_id)) {
           $('#'+child_id).trigger('click');
           clearInterval(renderChildTimer);
        }
    }, 800);    
}

在上面的代码中，我们使用click函数触发了url中的每个子ID。

将点击问题与骨干JS框架工作相关联

1 个答案: