【发布时间】：2013-12-18 07:11:17
【问题描述】：
假设我有一个这样的 JSON：
JSON 示例，我的 json 在 jsonlint 上经过验证并且可以正常工作。
json_object = {
"texts_model": {
"hello": "hola",
"icon_text": "Icon!"
},
"collection_vias": {
"text": "hola",
"icon_text": "Icon!"
}
};
我制作了一个解析 json 内容并从该 json 生成模型和集合的集合。
App.TemplatesCollection = Backbone.Model.extend({
model: App.TemplateModel,
url: TEMPLATES_SERVICE,
initialize: function(){
this.fetch({
success: (function () {
console.log(' Success ');
}),
error:(function (e) {
//console.log(' Error: ' + e);
}),
complete:(function (e) {
console.log(' Fetch completado con exito. ');
})
});
},
//Here i generate all my models and collections.
parse: function(response){
App.texts = new App.TemplateModel(response.text_model);
App.vias = new App.ViasCollection(response.collection_vias);
return response;
},
//I was trying with the get function but i the only thing i got was undefined.
plain_texts: function(){
return( this.get('plain_texts') ) ;
}
});
而视图是这样的：
App.TemplateView = Backbone.View.extend({ el: App.$main_content, 初始化：函数（）{ _.bindAll(this, 'render'); }, //这里我传递了我想要渲染的模板（html源代码）。 渲染：函数（模板）{ var html = render(模板, this.model.toJSON() ); 应用程序.$main_content.html(html); 返回这个； } });
还有我的 start.js，它们存放着我的模型和视图的所有声明：
//应用 应用 = {
init: function(){
console.log('Iniciando...');
//variables y constantes
App.$main_content = $('#main-content-content');
App.$main_header = $('#main-header-content')
App.$main_navigation = $('#main-navigation-content');
//data
App.templates = new App.TemplatesCollection();
//views
App.templateView = new App.TemplateView({model: App.texts});
//router
App.router = new App.Router();
},
start: function(){
//init
App.init();
//router
Backbone.history.start();
}
}
还有路由器：
//路由器 App.Router = Backbone.Router.extend({
routes:{
"" : "index",
":web" : "url"
},
index: function(){
console.log("index");
//Here i do not know what to do, i mean do i have to instiate the View each time i go to index? or only render?
App.templateView = new App.TemplateView({model: App.texts});
App.templateView.render("sections/login/form");
},
url: function(web){
console.log(web);
}
});
//on document ready
$(function(){
App.start();
});
我的问题是，当加载 html 时，我唯一拥有的是： “未捕获的 TypeError：无法调用未定义的方法 'toJSON'”
但是当我把它放在开发者控制台上时：
App.templateView = new App.TemplateView({model: App.texts});
App.templateView.render("sections/login/form");
我的视图渲染正确。
为什么我的视图没有在加载时呈现，只有在我将代码放在开发者控制台上时才呈现？
如何在路由器 url 的视图上渲染我的模型？ 为什么我在开发者控制台加载的 html 上有 undefined？
----编辑---
好吧，
我想我明白了。也许我正在产生一个不一定有问题的事情的问题。
现在我的模型是这样的：
App.TemplatesCollection = Backbone.Model.extend({
model: App.TemplateModel,
url: TEMPLATES_SERVICE,
plain_texts: function(){
return this.get('texts') ;
},
initialize: function(){
this.fetch();
}
});
还有观点：
App.TemplateView = Backbone.View.extend({
el: App.$main_content,
initialize: function(){
console.log(this.collection);
var ea = this.collection.get('texts');
console.log(ea);
},
render: function(template){
console.log(this.collection);
return this;
}
});
现在我在视图中看到了我的收藏。
但是当我尝试这样做以仅在我的视图中获取文本版本时：
var ea = this.collection.get('texts');
console.log(ea);
我收到未定义的错误：
未捕获的类型错误：无法调用未定义的方法 'get'
知道如何解决这个问题吗？
我正在尝试自己解决这个问题。我不想看起来像我要求开发我的解决方案。
提前致谢。
【问题讨论】：
标签： javascript backbone.js backbone-views backbone.js-collections backbone-model