- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在将一系列交互式教育应用程序从 Flash 转换为 Javascript,我的团队正计划使用 Backbone.js 作为框架。这些应用程序中的每一个基本上都是场景的集合,它们以问题或交互式小部件的形式向用户呈现信息和/或提示一些交互。我们正在考虑的应用程序的基本结构如下:
当然,问题是我是 Backbone 的新手。我已经完成了一些基本教程,但在将 Backbone 与静态 JSON 文件集成时遇到了问题。
假设我有以下非常基本的 JSON 文件,其中列出了要显示的三个场景:
var scenes = [
{
"name": "Introduction",
"label": "Introduction",
"message": "Welcome to this app"
},
{
"name": "Exercise",
"label": "Exercise",
"message": "If this were a real app, there'd be some sort of exercise here"
},
{
"name": "Conclusion",
"label": "Conclusion",
"order": "Thank you for completing this app"
}
]
我需要的,也是我想要做的,是让 Backbone 生成一个导航小部件,让用户可以在这些场景之间导航并显示每个场景的消息。 (这显然是真实世界应用程序的一个令人难以置信的简化版本。)
这是我尝试过的:
// simplified object containing stage information
var stages = [
{
"name": "Introduction",
"label": "Introduction",
"message": "Welcome to this app"
},
{
"name": "Exercise",
"label": "Exercise",
"message": "If this were a real app, there'd be some sort of exercise here"
},
{
"name": "Conclusion",
"label": "Conclusion",
"order": "Thank you for completing this app"
}
];
$(function(){
// create model for each stage
StageModel = Backbone.Model.extend({});
// create collection for StageModel
StageModelList = Backbone.Collection.extend({
model: StageModel
});
var stageModelList = new StageModelList();
// create view for list of stages
StageListView = Backbone.View.extend({
el: $("#stageNav"),
initialize: function() {
// if stages are added later
stagemodellist.bind('add',this.createStageList, this);
},
events: {
'click .stageListItem' : 'selectStage'
},
createStageList: function(model) {
$("#stageList").append("<li class='stageListItem'>"+model.label+"</li>");
},
selectStage: function() {
this.router.navigate("stage/"+this.stage.name,true);
}
});
// create view for each stages
StageView = Backbone.View.extend({
el: $("#stage"),
initialize: function(options) {
// get stage variable from options
this.stage = this.options.stage;
// display stage
createOnEnter(this.stage);
},
createOnEnter: function(stage) {
$("#stageLabel").html(stage.label);
$("#stageMsg").html(stage.message);
}
});
// create router
AppRouter = Backbone.Router.extend({
initialize: function() {
Backbone.history.start();
// create collection
new StageModelList();
// create view when router is initialized
new StageListView();
// loop through stages and add each to StageModelList
for (var s in stages) {
StageModelList.add(stages[s]);
}
},
routes: {
"stage/:stage" : "renderStage"
},
renderStage: function(stage) {
// display StageView for this stage
new StageView({stage:stage});
}
});
var App = new AppRouter();
});
和 html:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script class="jsbin" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script class="jsbin" src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="js/ilo4.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>My pathetic attempt at a Backbone.js app</p>
<div id="stageNav">
<ul id="stageList">
</ul>
</div>
<div id="stage">
<div id="stageLabel">
</div>
<div id="stageMsg">
</div>
</div>
</body>
</html>
(您还可以在此处查看 jsbin 版本:http://jsbin.com/iwerek/edit#javascript,html,live)。
不幸的是,目前这没有任何作用。
我知道我在这里做错了很多事情,还有一些我想问的问题:
一个
最佳答案
其实你离得并不远。
我已经克隆了你的 jsbin 并修复了它,所以它可以工作:link
我将其作为我对您问题的回答提交。我已经对它进行了非常详尽的评论,以解释发生了什么。
看看,希望对你有帮助。
编辑:见鬼,我也会把代码放在这里:
// simplified object containing stage information
window.stages = [
{
"name": "Introduction",
"label": "Introduction",
"message": "Welcome to this app"
},
{
"name": "Exercise",
"label": "Exercise",
"message": "If this were a real app, there'd be some sort of exercise here"
},
{
"name": "Conclusion",
"label": "Conclusion",
"message": "Thank you for completing this app"
}
];
$(function(){
// StageModel: no need to extend if you're not adding anything.
StageModel = Backbone.Model;
// StageCollection
StageCollection = Backbone.Collection.extend({
model: StageModel
});
// create view for list of stages
StageCollectionView = Backbone.View.extend({
el: $("#stageNav"),
initialize: function() {
// if stages are added later
this.collection.bind('add', this.createStageListItem, this);
},
events: {
'click .stageListItem' : 'selectStage'
},
// I'm adding the model's cid (generated by backbone) as the
// id of the 'li' here. Very non-ideal, as one of the points
// of backbone et al. is to keep from embedding and retrieving
// data from the DOM like this.
//
// Perhaps better would be to create a StageListItemView and
// render one for each model in the collection, perhaps like:
//
// createStageListItem: function(model) {
// this.$('#stageList').append(new StageListItemView({model: model});
// }
//
// where you have a StageListItemView that knows how to render
// itself and can handle click events and communicate with the
// collectionview via events.
//
// At any rate, this string-munging will suffice for now.
createStageListItem: function(model) {
this.$("#stageList").append("<li id=\"" + model.cid + "\" class='stageListItem'>" + model.get('label') + "</li>");
},
// Use backbone's event system, it's pretty awesome. Not to mention
// that it helps to decouple the parts of your app.
//
// And note that you can pass arguments when you trigger an event.
// So any event handler for the 'new-stage' event would receive
// this model as its first argument.
selectStage: function(event) {
var cid = $(event.target).attr('id');
this.trigger('new-stage', this.collection.getByCid(cid));
},
// This was a missing puzzle piece. Your StageCollectionView wasn't
// being rendered at all.
//
// Backbone convention is to call this function render, but you could
// call it whatever you want, as long as you, well, end up _calling_ it.
render: function() {
var self = this;
this.collection.each(function(model) {
self.createStageListItem(model);
});
return this;
}
});
// StageView,
StageView = Backbone.View.extend({
el: $("#stage"),
// We're going to assume here that we get passed a
// newStageEventSource property in the options and
// that it will fire a 'new-stage' event when we need
// to load a new stage.
initialize: function(options) {
this.eventSource = options.newStageEventSource;
this.eventSource.bind('new-stage', this.loadAndRenderStage, this);
},
// A load function to set the StageView's model.
load: function(model) {
this.model = model;
return this;
},
render: function() {
$("#stageLabel").html(this.model.get('label'));
$("#stageMsg").html(this.model.get('message'));
},
loadAndRenderStage: function(stage) {
this.load(stage);
this.render();
}
});
// Instatiate a StageCollection from the JSON list of stages.
// See Backbone docs for more, but you can pass in a list of
// hashes, and the Collection will use its model attribute to
// make the models for you
var stageCollection = new StageCollection(stages);
// View constructors take an options argument. Certain properties
// will automatically get attached to the view instance directly,
// like 'el', 'id', 'tagName', 'className', 'model', 'collection'.
var stageCollectionView = new StageCollectionView({
collection: stageCollection
});
// Instantiate the StageView, passing it the stageCollectionView in
// the options for it to listen to.
var stageView = new StageView({
newStageEventSource: stageCollectionView
});
// Last step, we need to call 'render' on the stageCollectionView
// to tell it to show itself.
stageCollectionView.render();
});
关于javascript - 如何使用 JSON 为交互式 Backbone.js 应用提供支持,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8670077/
最近开始学习MongoDB。今天老师教了我们 mongoexport 命令。在练习时,我遇到了一个典型的问题,包括教练在内的其他同学都没有遇到过。我在我的 Windows 10 机器上使用 Mongo
我是 JSON Schema 的新手,读过什么是 JSON Schema 等等。但我不知道如何将 JSON Schema 链接到 JSON 以针对该 JSON Schema 进行验证。谁能解释一下?
在 xml 中,我可以在另一个 xml 文件中包含一个文件并使用它。如果您的软件从 xml 获取配置文件但没有任何方法来分离配置,如 apache/ngnix(nginx.conf - site-av
我有一个 JSON 对象,其中包含一个本身是 JSON 对象的字符串。我如何反序列化它? 我希望能够做类似的事情: #[derive(Deserialize)] struct B { c: S
考虑以下 JSON { "a": "{\"b\": 12, \"c\": \"test\"}" } 我想定义一个泛型读取 Reads[Outer[T]]对于这种序列化的 Json import
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 11 个月前关闭。 Improve
我的旧项目在 MySQL 中有 Standard JSON 格式的数据。 对于我在 JS (Node.js) 和 DynamoDB 中的全新项目,关于 Standard JSON格式: 是否建议将其转
JSON 值字符串、数字、true、false、null 是否是有效的 JSON? 即,是 true 一个有效的 JSON 文档?还是必须是数组/对象? 一些验证器接受这个(例如 http://jso
我有一个 JSON 字符串,其中一个字段是文本字段。这个文本字段可以包含用户在 UI 中输入的文本,如果他们输入的文本是 JSON 文本,也许是为了说明一些编码,我需要对他们的文本进行编码,以便它不会
我正在通过 IBM MQ 调用处理数据,当由 ColdFusion 10 (10,0,11,285437) 序列化时,0 将作为 +0.0 返回,它会导致无效的 JSON并且无法反序列化。 stPol
我正在从三个数组中生成一个散列,然后尝试构建一个 json。我通过 json object has array 成功了。 require 'json' A = [['A1', 'A2', 'A3'],
我从 API 接收 JSON,响应可以是 30 种类型之一。每种类型都有一组唯一的字段,但所有响应都有一个字段 type 说明它是哪种类型。 我的方法是使用serde .我为每种响应类型创建一个结构并
我正在下载一个 JSON 文件,我已将其检查为带有“https://jsonlint.com”的有效 JSON 到文档目录。然后我打开文件并再次检查,结果显示为无效的 JSON。这怎么可能????这是
我正在尝试根据从 API 接收到的数据动态创建一个 JSON 对象。 收到的示例数据:将数据解码到下面给出的 CiItems 结构中 { "class_name": "test", "
我想从字符串转换为对象。 来自 {"key1": "{\n \"key2\": \"value2\",\n \"key3\": {\n \"key4\": \"value4\"\n }\n
目前我正在使用以下代码将嵌套的 json 转换为扁平化的 json: import ( "fmt" "github.com/nytlabs/gojsonexplode" ) func
我有一个使用来自第三方 API 的数据的应用程序。我需要将 json 解码为一个结构,这需要该结构具有“传入”json 字段的 json 标签。传出的 json 字段具有不同的命名约定,因此我需要不同
我想使用 JSON 架构来验证某些值。我有两个对象,称它们为 trackedItems 和 trackedItemGroups。 trackedItemGroups 是组名称和 trackedItem
考虑以下案例类模式, case class Y (a: String, b: String) case class X (dummy: String, b: Y) 字段b是可选的,我的一些数据集没有字
我正在存储 cat ~/path/to/file/blah | 的输出jq tojson 在一个变量中,稍后在带有 JSON 内容的 curl POST 中使用。它运作良好,但它删除了所有换行符。我知
我是一名优秀的程序员,十分优秀!