Backbone.js (with Require.js) variable/scope access issue
Date : March 29 2020, 07:55 AM
it should still fix some issue I've decided my best option is to use the global namespace as suggested by Addy Osmani, BUT I think if I needed an alternative option then I would just set an instance specific property like so: contacts_view.contact = new ContactView({
el: $('#view-contact')
});
var ContactsView = Backbone.View.extend({
events: {
'change select': 'display_selected'
},
display_selected: function (event) {
this.contact.render(model);
}
});
var contacts_view = new ContactsView({
el: $('#view-contacts'),
collection: contacts,
associated_view: new ContactView({
el: $('#view-contact'),
collection: contacts
})
});
|
Backbone.history.start() issue
Date : March 29 2020, 07:55 AM
it fixes the issue [SOLVED] the JS files (JQuery, Underscore and Backbone were added to HTML in the wrong order. The right order for me was: JQuery, Underscore, Backbone, MyOwnJSFiles. anyone for reading, hope this helps
|
Getting issue while installing Backbone-Require-Boilerplate
Date : March 29 2020, 07:55 AM
|
Render issue in View with subviews in Backbone/Require app
Date : March 29 2020, 07:55 AM
To fix the issue you can do I think you just need to remove el: $('#gradescontainer') from GradesView. You shouldn't set the el element for a subview since you are going to append it to the parent view that is not rendered yet. I included a ver simplified version that works just by el: $('#gradescontainer'). In my example I removed the GradeModel and GradeCollection and just put some placeholder code for simplicity. this.collection.on('add', this.renderGrade, this);
var GradeView = Backbone.View.extend({
tagName: 'div',
initialize: function(){
this.render();
},
template: "GRADE TEMPLATE",
render: function() {
this.$el.html(this.template);
return this;
},
});
var GradesView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function() {
var self = this;
for (var i = 0; i < 5; i++) {
self.renderGrade({id:i});
}
},
renderGrade: function(item) {
this.gradeView = new GradeView({model: item});
this.$el.append(this.gradeView.el);
},
});
var HomeView = Backbone.View.extend({
el: $('#test'),
initialize: function() {
this.gradesView = new GradesView();
this.render();
},
template: '<h1>GRADES</h1><div id="gradesviewcontainer"></div>',
render: function() {
this.$el.html( this.template );
this.$('#gradesviewcontainer').html( this.gradesView.el );
},
});
var v = new HomeView();
var GradeModel = Backbone.Model.extend({
defaults: {
letter: 'A'
}
});
var GradesCollection = Backbone.Collection.extend ({
model: GradeModel,
url: '/grade'
});
var GradeView = Backbone.View.extend({
tagName: 'div',
initialize: function(){
this.render();
},
template: _.template("<li><%= letter %></li>"),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
},
});
var GradesView = Backbone.View.extend({
initialize: function(){
this.collection = new GradesCollection();
this.collection.add(new GradeModel({letter: 'A'}));
this.collection.add(new GradeModel({letter: 'B'}));
this.collection.add(new GradeModel({letter: 'C'}));
this.collection.add(new GradeModel({letter: 'D'}));
this.render();
},
render: function() {
this.collection.each( function (item) {
this.renderGrade( item );
}, this )
},
renderGrade: function(item) {
this.gradeView = new GradeView({model: item});
this.$el.append(this.gradeView.el);
},
});
var HomeView = Backbone.View.extend({
el: $('#test'),
initialize: function() {
this.gradesView = new GradesView();
this.render();
},
template: '<h1>GRADES</h1><div id="gradesviewcontainer"></div>',
render: function() {
this.$el.html( this.template );
this.$('#gradesviewcontainer').html(this.gradesView.el);
},
});
var v = new HomeView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="test"></div>
|
require.js, backbone and cordova issue
Date : March 29 2020, 07:55 AM
|
Boards Message :
Related QUESTIONS :