Hi I have a basic question related to my Backbone code.
I first initialize 4 SpinnerView in a file called js.js. In my main code file called app.js I declare the model views and inside each view there is a model called Spinner. Inside each Spinner there is a collection called WordCollection and inside the collection there are models called Word.
The question is, how do I access to "test" variable inside SpinnerView, only in one of the 4 renders (ie the 3rd SpinnerView render) from the file js.js.
All help will be appreciated. Thanks!
Here is a sample of my code in the file where I render the Spinners:
//file js.js
(new SpinnerView()).render();
(new SpinnerView()).render();
(new SpinnerView()).render();
(new SpinnerView()).render();
And here is a sample of my code from my main code file:
//file app.js
(function($) {
// model word
window.Word = Backbone.Model.extend({
url: 'save.php',
defaults: {
word: '',
}
});
//collection word
window.WordCollection = Backbone.Collection.extend({
model: Word
});
// spinner model
window.Spinner = Backbone.Model.extend({
url: '/beta/save.php',
wordCollection: null,
defaults: {
title: 'title',
},
initialize: function() {
this.wordCollection = new WordCollection();
},
addWord: function(bs) {
this.wordCollection.add(bs);
}
});
// spinner view
window.SpinnerView = Backbone.View.extend({
template: null,
spinner: null,
el: '',
test: false, //<---- THIS IS THE VARIABLE I WANT TO ACCESS
initialize: function() {
_.bindAll(this, 'focusAddWord', 'addWord', 'onEnterAddWord', 'focusSetTitle', 'setTitle', 'onEnterSetTitle');
this.template = _.template($('#spinner-template').text());
this.spinner = new Spinner();
},
render: function() {
var el = $(this.template()).appendTo('.spinners');
this.setElement(el);
},
focusAddWord: function() {
this.$el.find('.add-word-input input').val('');
this.$el.find('.add-word-input input').focus();
},
addWord: function() {
var word = new Word();
var val = this.$el.find('.add-word-input input').val();
// validate minimum characters
if(this.$el.find('.add-word-input input').val().length > 0){
// go on
this.spinner.addWord({
word: val,
});
word.set({
word: val,
});
word.toJSON();
word.save();
this.$el.find('.add-word-input').hide();
this.renderWordCollection();
}
this.$el.find('.add-word-input').hide();
},
onEnterAddWord: function(ev) {
if (ev.keyCode === 13) {
this.$el.find('.add-word-input input').trigger('blur');
this.$el.find('.viewbox').trigger('click');
}
},
focusSetTitle: function() {
this.$el.find('.set-title-input input').val('');
this.$el.find('.set-title-input input').focus();
this.$el.find('.set-title-input input').addClass('input-active');
},
setTitle: function() {
var val = this.$el.find('.set-title-input input').val();
if(this.$el.find('.set-title-input input').val().length > 0){
// go on
this.spinner.set('title', val);
this.spinner.toJSON();
this.spinner.save();
}
},
onEnterSetTitle: function(ev) {
if (ev.keyCode === 13) {
this.$el.find('.set-title-input input').trigger('blur');
}
},
// call after adding a word to spinner.
renderWordCollection: function() {
var wc = this.spinner.wordCollection;
var ListTemplate = _.template($('#word-collection-template').html(),{wc: wc});
this.$el.find('ul').html(ListTemplate);
}
});
})(jQuery);
It's not entirely clear what you want to do with test
, but to use it as an instance variable simply initialize it:
window.SpinnerView = Backbone.View.extend({
// code removed for brevity
test: false, //<---- THIS IS THE VARIABLE I WANT TO ACCESS
initialize: function() {
_.bindAll(this, 'focusAddWord', 'addWord', 'onEnterAddWord', 'focusSetTitle', 'setTitle', 'onEnterSetTitle');
this.template = _.template($('#spinner-template').text());
this.spinner = new Spinner();
this.test = false, //<---- PUT IT HERE
},
Then, you can access it from within function inside the view:
focusAddWord: function() {
console.log(this.test);
this.$el.find('.add-word-input input').val('');
this.$el.find('.add-word-input input').focus();
},
And you can also access it from outside:
var view = new SpinnerView();
view.render();
console.log(view.test);
And modify it:
view.test = true;
In addition, don't forget you can pass options when instanciating a view:
initialize: function(options) {
_.bindAll(this, 'focusAddWord', 'addWord', 'onEnterAddWord', 'focusSetTitle', 'setTitle', 'onEnterSetTitle');
this.template = _.template($('#spinner-template').text());
this.spinner = new Spinner();
// use an empty `options` object if none is provided, fallback to `false` default
this.test = (options || {}).mustBeTested || false,
},
// ...
focusAddWord: function() {
if(this.test){
// do something when the view needs to be tested
}
this.$el.find('.add-word-input input').val('');
this.$el.find('.add-word-input input').focus();
},
You then simply pass options as appropriate:
(new SpinnerView()).render();
(new SpinnerView()).render();
(new SpinnerView({ mustBeTested: true })).render();
(new SpinnerView()).render();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.