如何从外部文件访问模型视图内的变量

Question

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);

Answer 1

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();