如何将一个视图移动到另一个视图?
how to move one view to another view?
能否请您告诉我如何在 backbone 中从一页导航到另一页。
我想在按钮点击时显示第二个 html 如何实现
我太喜欢了。我反对这样的活动
events: {
'click #click':'moveTonext'
},
moveTonext: function(){
alert('---')
},
我这样制作第二页
define([
'jquery',
'underscore',
'backbone',
'text!templates/second.html'
], function ($, _, Backbone, statsTemplate) {
'use strict';
var secondView = Backbone.View.extend({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el: '#todoapp',
// Compile our stats template
template: _.template(statsTemplate),
// Delegated events for creating new items, and clearing completed ones.
events: {
},
// 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 () {
this.render();
},
serialize: function () {
return {
message: 'world'
};
},
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render: function () {
this.$el.html(this.template());
}
// Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`.
});
return secondView;
})
第二个html
<h1>second</h1>
基本上您的按钮应该触发导航,所以 click
处理程序应该如下所示:
moveToNext: function () {
router.navigate("other/path", { trigger: true });
}
然后,在您的 router
代码中,您需要为上述路径添加路由处理程序:
routes: {
"other/path": "handleOtherPath"
},
handleOtherPath: function () {
new SecondView();
}
这是针对 SecondView
应该替换 FirstView
的情况。如果应该附加它,可以使用以下机制:
moveToNext: function () {
new SecondView({ el: this.$(secondViewContainerSelector) });
}
这是一个有效的 Plunker sample。
能否请您告诉我如何在 backbone 中从一页导航到另一页。 我想在按钮点击时显示第二个 html 如何实现
我太喜欢了。我反对这样的活动
events: {
'click #click':'moveTonext'
},
moveTonext: function(){
alert('---')
},
我这样制作第二页
define([
'jquery',
'underscore',
'backbone',
'text!templates/second.html'
], function ($, _, Backbone, statsTemplate) {
'use strict';
var secondView = Backbone.View.extend({
// Instead of generating a new element, bind to the existing skeleton of
// the App already present in the HTML.
el: '#todoapp',
// Compile our stats template
template: _.template(statsTemplate),
// Delegated events for creating new items, and clearing completed ones.
events: {
},
// 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 () {
this.render();
},
serialize: function () {
return {
message: 'world'
};
},
// Re-rendering the App just means refreshing the statistics -- the rest
// of the app doesn't change.
render: function () {
this.$el.html(this.template());
}
// Add a single todo item to the list by creating a view for it, and
// appending its element to the `<ul>`.
});
return secondView;
})
第二个html
<h1>second</h1>
基本上您的按钮应该触发导航,所以 click
处理程序应该如下所示:
moveToNext: function () {
router.navigate("other/path", { trigger: true });
}
然后,在您的 router
代码中,您需要为上述路径添加路由处理程序:
routes: {
"other/path": "handleOtherPath"
},
handleOtherPath: function () {
new SecondView();
}
这是针对 SecondView
应该替换 FirstView
的情况。如果应该附加它,可以使用以下机制:
moveToNext: function () {
new SecondView({ el: this.$(secondViewContainerSelector) });
}
这是一个有效的 Plunker sample。