我使用RequireJS来组织我的Backbone应用程序,我的路由器模块如下:
define([
'jquery',
'underscore',
'backbone',
'collections/todos',
'views/todosview'
], function($, _, Backbone, TodosCollection, TodosView){
var AppRouter = Backbone.Router.extend({
routes: {
"": "index",
"category/:name": "hashcategory"
},
initialize: function(options){
// Do something
},
index: function(){
// Do something
},
hashcategory: function(name){
// Do something
}
});
var start = function(){
p = $.ajax({
url: 'data/todolist.json',
dataType: 'json',
data: {},
success: function(data) {
var approuter = new AppRouter({data: data});
Backbone.history.start();
}
});
};
return {
start: start
};
});
我有另一个app模块,用于Router.start()触发整个应用程序.现在,在我的Backbone.View模块中,我想 …
使用骨干,是否可以在历史记录中存储一些数据,以便在调用后退时可以重新获取？
在无骨干应用程序中,我的应用程序将类似于以下内容.执行操作时:
//When doing some action
history.pushState(mycurrentData, title, href)
以及以下情况,以便在返回时恢复当前数据:
function popState(event) {
if (event.state) {
state = event.state;
//get my data from state
}
}
window.onpopstate = popState;
我需要在我的骨干应用程序上应用相同的行为.
谢谢
我是Web应用程序开发的新手.我有一个名为LoginModel的骨干模型.我想创建它的一个对象,并使其可以从动态加载的任何Backbone View进行全局访问.这是我的模特..
define(['underscore', 'backbone'], function(_, Backbone) {
LoginModel = Backbone.Model.extend({
initialize: function(){ },
defaults:{
userName: 'undefined',
userID: 'undefined'
},
urlRoot: 'https://xxxx.xx.xxxxxx',
parse: function(response, options){
return{
userName: response.userName,
userId:response.userId
};
}
});
});
就使用骨干路由器和骨干网中的渲染视图而言,这更像是一个概念性问题.
为了一个例子(我正在构建以学习这个)我有一个基本的CRUD应用程序的联系人,创建表单,所有联系人列表,联系人单一视图和编辑表单.
为了简单起见,我会说我只想一次看到其中一件事.显然用jQuery显示和隐藏它们将是微不足道的,但那不是我追求的.
我有两个想法,
1)从我的路由器触发自定义事件,删除所有视图并发送可在所有视图中侦听的事件(触发close方法)和主App视图,然后实例化特定视图 - 即:
App.Router = Backbone.Router.extend({
routes: {
'' : 'index',
'addnew' : 'addNew',
'contacts/:id' : 'singleContact',
'contacts/:id/edit' : 'editContact'
},
index: function(){
vent.trigger('contactR:closeAll');
vent.trigger('contactR:index');
},
addNew: function() {
vent.trigger('contactR:closeAll');
vent.trigger('contactR:addNew');
},
singleContact: function(id) {
vent.trigger('contactR:closeAll');
vent.trigger('contactR:singleContact', id);
},
editContact: function(id) {
vent.trigger('contactR:closeAll');
vent.trigger('contactR:editContact', id);
},
});
(nb:vent正在扩展骨干事件obj所以我可以发布/ sub)
2)或将/可能/我应该发送关闭所有事件并在路由器中创建视图的实例？
注意我正在寻求实现这一点,而不是钻研其他库或框架,如木偶等.
由于骨干网没有办法做大多数事情,我很多东西都很困惑.其中一个是浏览我的应用程序的正确方法.
我意识到BB路由器有一个'.navigate'方法,可以用来推送网址和触发路由.现在,由于我的应用程序有多个路由器,我不确定在一个或其他路由器上调用'.navigate'之间有什么区别.
这是我的路由器
new Etaxi.Routers.System()
new Etaxi.Routers.Header()
new Etaxi.Routers.Videos()
new Etaxi.Routers.News()
现在我能做到
router = Etaxi.Routers.System()
// or i could do
router = Etaxi.Routers.Header()
router.navigate(url)
我用于全球应用导航的路由器有什么区别吗？这对我来说似乎很奇怪.
我有一个相当复杂的Backbone应用程序,我不知道如何组织视图/模板.该应用程序是基于Web的电子邮件客户端.我真的很难理解如何制作这个侧边栏.
应用程序侧栏与您在Apple Mail/Outlook中看到的非常相似.它基本上是一个文件夹浏览器.该视图存在于每个页面上.
我有两个主要问题:
技术上有三个"集合"在侧栏上呈现 - accounts => mailboxes和labels.所以一些示例代码如下所示:
<div class="sidebar">
<div class="sidebar-title">Mailboxes</div>
<div class="sidebar-subtitle">Gmail</div>
<div class="mailboxes" data-account-id="1">
<ul>
<li><a href="...">Inbox</a></li>
<li><a href="...">Sent</a></li>
...
</ul>
</div>
<div class="sidebar-subtitle">Yahoo</div>
<div class="mailboxes" data-account-id="2">
<ul>
<li><a href="...">Inbox</a></li>
<li><a href="...">Sent</a></li>
...
</ul>
</div>
<div class="sidebar-title">Labels</div>
<div class="sidebar-labels">
<ul>
<li>Home</li>
<li>Todo</li>
</ul>
</div>
</div>
所以理论上我需要做这样的事情,不是吗？
<div class="sidebar">
<div class="sidebar-title">Mailboxes</div>
<% for account in @accounts.models: %>
<div class="sidebar-subtitle"><%= account.get('name') %></div>
<div class="mailboxes" data-account-id="<%= account.get('id') %>">
<ul>
<% for mailbox in account.mailboxes.models: %>
<li><a href="..."><%= mailbox.get('name') …我正在努力学习骨干,但是要说实话,我感觉有点不知所措.在任何地方,我看都是以稍微不同的方式完成的,每个都有更多的框架和插件来学习.所以我决定放下我对Addy Osmani的信仰,并正在阅读他的Backbone Fundamentals书.我遵循了他的建议并使用了Backbone-Boilerplate.但无论出于何种原因,我无法成功安装Grunt BBB,因此无法下载工作示例.
我想要做的是遵循此路由器部分并使用视图.http://addyosmani.github.com/backbone-fundamentals/#router.js.
问题是我认为这些说明不完整.首先,collection.fetch()变量的范围是错误的,我真的不明白我需要放置视图的位置和方式.我很确定如果我能看到一个可行的例子,我可以理解它,但正如我所说,到处都是我看到的不同的实现.
有谁知道如何使用带有路由器和视图的骨干 - 样板？在任何地方都有工作示例吗？
backbone.js backbone-views backbone-routing backbone-boilerplate
我应该如何处理BackboneJS中的路由？路由时,在新视图之后,我应该触发事件还是直接渲染视图？
以下是两种情况:
触发事件:
routes: {
'orders/view/:orderId' : 'viewOrder'
},
viewOrder: function (orderId) {
var viewOrderView = new ViewOrderView();
vent.trigger('order:show', orderId);
}
在我看来,我有:
var ViewOrderView = Backbone.View.extend({
el: "#page",
initialize: function () {
vent.on('order:show', this.show, this);
},
show: function (id) {
this.id = id;
this.render();
},
render: function () {
var template = viewOrderTemplate({ id: this.id });
this.$el.html(template);
return this;
}
});
或者,我应该走这条路:
routes: {
'orders/view/:orderId' : 'viewOrder'
},
viewOrder: function (orderId) {
var viewOrderView = new ViewOrderView({id : orderId }); …这是我的骨干路由器:
var Router = Backbone.Router.extend({
routes: {
"": "home",
"home": "home",
"about": "about",
"works": "works",
"work/:id" : "work",
"news": "news",
"contact": "contact"
},
initRoutes: function(e) {
this.on('route:home', function() {
page.activepage = "home";
page.render();
});
this.on('route:about', function() {
page.activepage = "about";
page.render();
});
this.on('route:works', function() {
page.activepage = "works";
page.render();
});
this.on('route:work', function(id) {
page.activepage = "works";
page.param = id;
page.render();
});
this.on('route:news', function() {
page.activepage = "news";
page.render();
});
this.on('route:contact', function() {
page.activepage = "contact";
page.render();
});
},
initialize: function(){ …从Backbone.js中的"模型"执行Ajax请求是否正确？从"路由器"来看它更正确吗？我没有将RESTful用于Backbone(由于其他原因).当我说"做Ajax请求"时,我的意思是Ajax函数在模型中实现.该函数可以在模型外部调用(和).
我的Web应用程序不使用路由器(仅视图和模型).当我在应用程序中导航时,我不希望在浏览器中有url路由.有什么问题？
我在重新渲染后尝试单击提交时遇到问题.
这是我的看法:
ShareHolderInfoView = Backbone.View.extend( {
template : 'shareholderinfo',
initialize: function() {
this.model = new ShareHolderInfoModel();
},
render : function() {
$.get("shareholderinfo.html", function(template) {
var html = $(template);
that.$el.html(html);
});
//context.loadViews.call(this);
return this;
},
events:{
"change input":"inputChanged",
"change select":"selectionChanged",
"click input[type=submit]":"showModel"
},
inputChanged:function(event){
var field = $(event.currentTarget);
var data ={};
data[field.attr('id')] = field.val();
this.model.set(data);
},
showModel:function(){
console.log(this.model.attributes);
alert(JSON.stringify(this.model.toJSON()));
}
});
这是我的路由器
var shareholderInfo, accountOwnerInfo;
App.Router = Backbone.Router.extend({
routes:{
'share':'share',
'joint':'joint'
},
share:function(){
$("#subSection").empty();
if(!shareholderInfo){
shareholderInfo = new ShareHolderInfoView();
$("#subSection").append(shareholderInfo.render().el);
} …我正在构建一个简单的Backbone应用程序,其中我主要有一个包含书籍列表的视图(书名+封面图像)和另一个我想要在列表中添加新书的视图.
当我使用示例数据时,带有书籍的视图可以正确呈现,但是当我尝试将书籍添加到列表时,它不起作用,我不知道哪个是问题.
这是JSFiddle http://jsfiddle.net/swayziak/DRCXf/4/和我的代码:
HTML:
<section class="menu">
<ul class="footer">
<li><a href="">List of Books</a></li>
<li><a href="#edit">Edit</a></li>
<li><a href="#about">About</a></li>
</ul>
</section>
<section class="feed"></section>
<script id="bookTemplate" type="text/template">
<img src="<%= image %>"/>
<h2 class="bookTitle"><%= title %><h2>
</script>
<script id="aboutTemplate" type="text/template"> About </script>
<script id="editTemplate" type="text/template">
<form id="addBook" action="#">
<label for="title">Book Title</label><input type="text" id="title">
<label for="image">Image Link</label><input type="text"/ id="image">
<button id="add-book">Button</button>
</form>
</script>
</div>
和Backbone代码:
app = {};
// 样本数据
var books = [
{title:'Imperial Bedrooms', image:'http://upload.wikimedia.org/wikipedia/en/thumb/e/e8/Imperial_bedrooms_cover.JPG/200px-Imperial_bedrooms_cover.JPG
},
{title:'Less than zero',
image:'http://d.gr-assets.com/books/1282271923l/9915.jpg'
},
]. …