Question

以下是我的视图模板abclistTemplate

<li>
<a id="details">

<h3 class="blue_txt"><%= detail1%></span></h3>
<div class="list_l_txt">
    <p>From: <span> <%= detail2%> </span></p>

</div>


</a>
</li>

我在js文件中有以下代码

 define(['jquery', 'underscore', 'backbone', 'text!views/abcListTemplate.html','views/abcDetailsView', 'app/utils'], function($, _, Backbone, tmpl_abcView,abcDetailsView, utils) {

var abcListView = Backbone.View.extend({
    // Setting the view's template property using the Underscore template method        
    template: _.template(tmpl_abcView),
    // View constructor
    initialize: function() {
        self = this;

    },
    // View Event Handlers
    events: {
        "click #details": "clickedDetails"
    },
    // Renders the view's template to the UI
    render: function() {            
        return $(this.el).html(this.template(this.model));
    },
    clickedDetails:function(){
        var self=this;            

        mainRouter.views.leaveDetailsView = new abcDetailsView({ model:this.model }).render();

        window.location.href="#leaveDetails";

    }
});
return abcListView;
 });

abcDetailView.html

<p><%=detail1%><p>
<p><%=detail2%></p>
<p><%=detail3%></p>

abcDetailView.js

  define(['jquery', 'underscore', 'backbone', 'text!views/abcDetailView.html','app/utils'], function($, _, Backbone, tmpl_abcDetailView,Utils) {

var leaveDetailsView = Backbone.View.extend({
    // Setting the view's template property using the Underscore template method        
    template: _.template(tmpl_abcDetailView),
    // View constructor
    initialize: function() {            
        console.log("init details")
    },
    // View Event Handlers
    events: {
    },
    // Renders the view's template to the UI
    render: function() {
        console.log("leavedetails");            
       return $(this.el).html(this.template(this.model));           

    }
});
return leaveDetailsView;
 });

路由器代码

 define(function(require) {

var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone');
        LocalStorage=require('app/localStorage');

Backbone.View.prototype.close = function () {
    this.undelegateEvents();
    this.remove();
    this.unbind();
    if (this.onClose) {
        this.onClose();
    }
};

var router = Backbone.Router.extend({
    initialize: function() {
        // store the views in an object for later use
        this.views = {};
        this.collections = {};
    },
    // All of your Backbone Routes (add more)
    routes: {
        // When there is no hash bang on the url, the dataVisualizationView method is called
        "": "default",
        "abcDetails":"abcDetails",           

    },        
    default:function(){

            require(['views/defaultView/defaultView'],function(defaultView){
                _this.views.defaultView=(_this.views.defaultView)?_this.views.defaultView:new defaultView({el:$("#wrapper")});
                _this.views.defaultView.render();
            })

    },
    abcDetails:function(){

            require(['views/abcDetailsView/abcDetailsView'],function(abcDetailsView){
                _this.views.abcDetailsView=(_this.views.abcDetailsView)?_this.views.abcDetailsView:new abcDetailsView({el:$("#wrapper")});
                _this.views.abcDetailsView.render();

    }

});
// Returns the Router class
return router;
 });

路由在url中更改，但不显示新的html。

Answer 1

它并不像您实际使用路由器来改变路线一样。路由器的主要目的是允许您的应用响应URL更改，但为了实现此目的，您必须通过它与浏览器位置进行交互，而不是直接通过window.location.href。请参阅the docs。

基本上，您必须使用Backbone.history.start()在应用程序的某个位置启动路由器，使用路由将路由器实例化到控制器功能以显示新视图，然后您可以通过以下方式触发路由更改：做router.navigate(fragment)。

Answer 2

您应该为路由器创建一个对象，以便所有路由都将在浏览器中注册。

RouterEg = Backbone.Router.extend({

  routes: {
   "abcDetails":"abcCallBack"        
  },

  abcCallBack : function() {
      //create a object for your view and call render function of your view
  }     

 });

 new RouterEg();

 Backbone.history.start();

这将注册您的路线。

现在您可以使用

触发它

this.navigate（ “abcDetails”，{触发：真}）;

确保你有一个容器，你可以在附加你的html模板时附加你的$（this.el）。你也可以在你的视图中指定你的el容器。

var leaveDetailsView = Backbone.View.extend({

**el : $('#yourcontainer'),**

// Setting the view's template property using the Underscore template method        
template: _.template(tmpl_abcDetailView),   

// View constructor
initialize: function() {            
    console.log("init details")
},
// View Event Handlers
events: {
},
// Renders the view's template to the UI
render: function() {
    console.log("leavedetails");            
   return $(this.el).html(this.template(this.model));           

}

}）;

Answer 3

在abcDetails方法中，当您想要渲染视图时，请不要忘记致电el：_this.views.abcDetailsView.render().el。由于el实际上是代表您视图的元素。

然后执行var somerouter = new router;，然后执行Backbone.history.start();。

看看是否有效。

BackboneJS：路由已更改但未显示html

3 个答案: