个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我想在我的页面顶部创建一个固定位置的导航菜单，它应该在我点击相关链接后显示不同的 View 。我有一个 index.php 文件、一个 mainpage.js 文件和用于集合、模型、 View 、路由器和 html 模板的单独文件夹。显示菜单和 View 到目前为止有效，只是导航不起作用，例如我不知道如何让它正常工作。导航栏应该始终可见，#mainContent Div 应该显示不同的 View ...
我的 index.php(正文部分):
<body>
<div id="container">
<div id="mainMenu"></div>
<div id="mainContent"></div>
</div>
<script data-main="js/config" src="js/lib/requirejs/require.js"></script>
<script> require(['config'], function(config) {
require(['app/mainpage']);
});
</script>
</body>
所以我创建了一个 MainMenuCollection,json 文件:
[
{
"name":"HOME",
"id":"1",
"url":"home"
},
{
"name":"FIRST PAGE",
"id":"2",
"url":"firstpage"
},
{
"name":"SECOND PAGE",
"id":"3",
"url":"secondpage"
},
{
"name":"THIRD PAGE",
"id":"4",
"url":"thirdpage"
},
{
"name":"ABOUT",
"id":"5",
"url":"about"
},
{
"name":"CONTACT",
"id":"6",
"url":"contact"
}
]
我的收藏文件:
define([
"backbone",
"models/MainMenuModel"
],
function(Backbone, MainMenuModel) {
var MainMenuCollection = Backbone.Collection.extend({
model: MainMenuModel,
url: "MainMenuCollection.json"
});
return MainMenuCollection;
});
我的菜单模型:
define([
"jquery",
"backbone"
],
function($, Backbone) {
var MainMenuModel = Backbone.Model.extend({
urlRoot: "/MainMenuCollection.json"
});
return MainMenuModel;
});
这是我的 Menu.html 文件:
<ul>
{{#each mainmenu}}
<li>
<a href="{{this.url}}">{{this.name}}</a>
</li>
{{/each}}
</ul>
菜单 View 本身:
define(['backbone','handlebars', 'text!templates/MainMenu.html'],
function(Backbone,Handlebars, Template) {
'use strict';
var MainMenuView = Backbone.View.extend({
template: Handlebars.compile(Template),
events: {
'click a':'mainMenu_event'
},
mainMenu_event: function(e) {
var id = $(e.currentTarget).attr('href');
Backbone.history.navigate(id, {trigger:true});
},
initialize: function () {
},
render: function() {
//this.model.toJSON())
$(this.el).html(this.template({mainmenu:this.collection.toJSON()}));
return this;
}
});
return MainMenuView;
}
);
最后是路由器:
define([
'backbone',
//
'views/MainMenu',
'views/Home',
'views/Firstpage',
'views/Secondpage',
'views/Thirdpage',
'views/About',
'views/Contact',
'collections/MainMenuCollection'
],
function(
Backbone,
MainMenuView,
HomeView,
FirstpageView,
SecondpageView,
ThirdpageView,
AboutView,
ContactView,
MainMenuCollection
) {
'use strict';
var Router = Backbone.Router.extend({
routes: {
'': 'index',
'pages/firstpage' : 'firstpage',
'pages/secondpage' : 'secondpage'
},
//Initializing the application
initialize: function () {
var self = this;
//Collections
this.mainMenuCollection = new MainMenuCollection();
//Views
this.mainMenuView = new MainMenuView({el:'#mainMenu', collection:this.mainMenuCollection});
this.homeView = new HomeView({el:'#mainContent'});
//this.menuView = new Menu({el:'.menu'});
self.homeView.render();
//self.gridView.render();
this.mainMenuCollection.fetch({success: function(collection) {
self.mainMenuView.collection=collection;
self.mainMenuView.render();
}});
Backbone.history.start({
pushState: false
});
},
//Default route.
index: function () {
var self = this;
},
firstpage: function() {
this.firstpageView = new FirstpageView({el:'#mainContent'});
self.firstpageView.render();
},
secondpage: function() {
this.secondpageView = new SecondpageView({el:'#mainContent'});
self.secondpageView.render();
}
});
return Router;
}
);
我的问题是，我不知道如何浏览不同的页面/ View ，所以如果有人可以帮助我吗？如何设置路由器？帮助会很棒! :-)
最佳答案
[更新]好的，我自己得到了:
因为我的路由器中有“页面”作为引用:
routes: {
'': 'index',
'pages/firstpage' : 'firstpage',
'pages/secondpage' : 'secondpage'
},
我所要做的就是在 html 文件中，其中 anchor 是:
<a href="#pages/{{this.url}}">{{this.name}}</a>
关于javascript - BackboneJS - 导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20457102/
26
4
0
我正在使用 Backbonejs 和 Requirejs 创建单页 Web 应用程序。我的应用程序似乎存在内存泄漏。 为了测试，我创建了一个示例代码。它创建一个 View 对象，调用其 render
我从加载对话框的位置有一个详细信息 View 。 此对话框有一个表单，用户可以在其中输入一些值(对应于我的模型属性) 我从详细信息 View 传递模型并在同一模型中设置值(在表单字段的更改操作上) 现
我正在尝试添加 Jquery Jplayer http://jplayer.org到我的 Backbone 应用程序，但无法运行它。我将脚本设置到 RequireJS 配置文件中，控制台告诉我脚本已加
Click here for the js fiddle example 此模板应该在集合中呈现新消息，我正在尝试遵循 this tuorial使用我自己的版本来呈现消息
由于某种原因，我在保存模型时无法输入 success 和 error block 。无论我的响应是成功“201”还是错误“404”，我的代码都不会命中 debugger 行。有谁知道可能出了什么问题吗
我有一个BackboneJS应用程序，可在 View 上显示Youtube视频。因此，当用户单击缩略图时，Youtube-iframe将打开并播放视频。当用户关闭它并想再次播放时，什么也没有发生。为了
我刚刚开始学习 BackboneJS，我正在编写一个小示例文档来测试它的工作方式。但我很难理解它，目前它根本没有任何意义:) 所以，我有下一个文件结构: /* application.js */ va
在我的 Backbone.js 应用程序中，我有一个路由结构，其中包含一些我只想在一个处理程序中处理的公共(public)部分。例如，这些 URL /#scenario/1/show-report /
我刚刚开始学习backbonejs。这是我的一些演示代码行: var i = 0; Player = Backbone.Model.extend({
我有一个 Backbone 应用程序，使用 HandlebarsJS 作为我的 HTML 模板。现在我有一个按钮可以触发登录弹出框。我的问题是，我必须双击按钮/链接，直到弹出窗口打开。这是为什么？？我
我是 Backbonejs 的新手，试图理解这里的模型。我定义了一个这样的模型 var Employee=Backbone.Model.extend({ initialize: functi
在 BackboneJS 的 router.js 中使用 this.initialize(); 和 有什么区别 require(['router'],function(Router) { ro
我正在使用 Rails 3.1 mongodb 和 backbonejs 构建小型单页应用程序。 我有两个可通过 json api 获得的资源。我在 backbone 中创建了两个模型和集合，看起来像
我可以在哪里进行一些计算，例如计算员工工资？是否需要使用外部文件，或者我可以使用模型、集合或 View ？ 最佳答案 模型的属性表示数据实体(员工)的状态。它的方法应该改变数据实体的状态。所以模型的方
我在表单和表单数据中有一个上传图像。表单数据存储在模型中 如何将表单数据与文件数据结合并保存模型 我正在设置模型属性以及如何在属性中包含文件数据。我找到了这个链接 Forcing Backbone t
我将 Tastypie 用于我的 RESTful api，将 Backbonejs 用于前端。模型的 fetch 工作正常，但是，对于 Backbone.Collection 我似乎得到了错误的回应:
我有一个代表产品的模型(在 UL 中显示为 LI 项目)和一个包含这些产品的集合。 当我单击一个 LI 时，我希望基础模型的属性设置为 true，而集合中的所有其他模型的属性设置为 false。 //
我想在我的页面顶部创建一个固定位置的导航菜单，它应该在我点击相关链接后显示不同的 View 。我有一个 index.php 文件、一个 mainpage.js 文件和用于集合、模型、 View 、路由
您好，我是 Backbone 的新手，我只是稍微尝试了一下，这是我的代码: var Users = Backbone.Collection.extend ({ url : 'h
我的应用程序的索引页面位于http://cms/admin(我在本地主机上)。索引页上只有一个 a 元素: deneme 当我点击链接时，它会转到/cms/admin/test 我想使用 Backbo
我是一名优秀的程序员,十分优秀！