Переменные Underscore-темплейт не принимают значения из метода fetch().(Uncaught ReferenceError: variable is not defined )

Question

[semolex]

Здраствуйте!
Така вот проблема - есть набор данных в базе. Когда я "вынимаю" его методом fetch() - данные приходят. А вот в переменную на Underscore-темплейте передать не удается...
Может кто подскажет в чем причина? Спасибо!
Вот код для лучшего обьяснения :)

var AdminView = Backbone.View.extend({

el: "#content",
render: function() {

    var that = this;
    var template = _.template($('#adminpage').html()); //it works and render main template
    that.$el.html(template);
    var test = new UsersCollection();

    test.fetch({
        success: function(data) {
            console.log(test.toJSON());//it works too,showing data in console
            var template = _.template($('#users_table').html(), {
            test: test
            });
            that.$el.html(template);
        }
    });

И соответственно HTML-темплейт

<% _.each(test,function(user,key,list){ %>
 <tr>
   <td><%= key %></td>

   <td><%- user.l_name %></td>

   <td><%- user.f_name %></td>

   <td><%- user.login %></td>

   <td><%- user.email %></td>

   <td><%- user.id_role %></td>

   <td>
     <div class="small success btn">


 </tr>
 <% }) %>*/

Answer 1

[Константин Китманов]

Вы передаете в шаблон коллекцию, а шаблон этого совсем не ждет.

var template = _.template($('#users_table').html(), {
            test: test.toJSON()
});

Comments

[semolex]

а как будет правильнее?
toArray?
или просто test:test?
Я пока не могу привыкнуть к JS :(

[Константин Китманов]

Как я написал — test: test.toJSON(). Этот способ идиоматичен для Backbone.

[semolex]

К сожалению, та же ошибка...

[Константин Китманов]

jsbin.com/wivev/1/edit вроде все работает… что возвращает test.toJSON()?

[semolex]

Если убрать HTML-темплейт (когда он есть то ошибка) - возвращает

s {length: 2, models: Array[2], _byId: Object, constructor: function, url: "/users/all"…}
script.js:83
function (t){return this.map(function(e){return e.toJSON(t)})}

[Константин Китманов]

Смотрите внимательнее, что у вас там происходит. То, что вы показали — не есть результат вызова Backbone.Collection#toJSON.

[semolex]

Просто вернуть не получается.Пишет undefined. А через console.log - то что я написал :(

[semolex]

А если просто Backbone.Collection.toJSON():

Backbone.Collection.toJSON()
TypeError: Object function (t,e){e||(e={});if(e.model)this.model=e.model;if(e.comparator!==void 0)this.comparator=e.comparator;this._reset();this.initialize.apply(this,arguments);if(t)this.reset(t,i.extend({silent:true},e))} has no method 'toJSON'

[Константин Китманов]

@semolex зачем вы вызвали Backbone.Collection.toJSON(), вы можете объяснить?)

[semolex]

Я же говорю - совсем не разбираюсь :)
Как я не пробую - test.toJSON() - Reference error: undefined
Тогда я просто попробовал Backbone.Collections.toJSON() :)

Может я пропустил что-то где-то? Где-то обьявить и так дале...

[Константин Китманов]

@semolex Покажите, как сейчас выглядит код AdminView, полностью. В том, что в посте, я ошибки не вижу.

[semolex]

Все что касается Admin полностью:

var Router = Backbone.Router.extend({
    routes: {
        "": "index",
        "admin": "admin"       
    }
});
var router = new Router;

var UsersCollection = Backbone.Collection.extend({
    url: '/users/all'
});

var AdminView = Backbone.View.extend({

    el: "#content",
    render: function() {

        var that = this;
        var template = _.template($('#adminpage').html());
        that.$el.html(template);
        var test = new UsersCollection();

        test.fetch({
            success: function(data) {
                console.log(data);
               var template = _.template($('#users_table').html(), {
                test: test.toJSON()
                });
                that.$el.html(template);
            }
        });

[Константин Китманов]

@semolex ну это все-таки не все:)

[semolex]

А что надо еще? Я пропустил что-то да?

[Константин Китманов]

@semolex я вижу, что у вас не хватает закрывающих скобок, как минимум.

[semolex]

JSLinter ничего не говорит...Да и ошибка не выпрыгивает...

[semolex]

кроме этого есть ошибки?

[Константин Китманов]

Не знаю, как у вас линтер настроен, но у меня на тот кусок, что вы показали, JSHint изругался весь. Так что вы все-таки не до конца мне что-то показываете.

[semolex]

Я скинул все что с Admin связано
Бросаю ВЕСЬ код тогда, извините если неправильно понял.

var Router = Backbone.Router.extend({
    routes: {
        "": "index",
        "admin": "admin",
        "cooker": "cooker",
        "waiter": "waiter"
    }
});
var router = new Router;

var UsersCollection = Backbone.Collection.extend({
   
    url: '/users/all'
});

var DishesCollection = Backbone.Collection.extend({
    
    url: '/dishes/all'
});

var CategoriesCollection = Backbone.Collection.extend({
    
    url: '/categories/all'
});



var LoginView = Backbone.View.extend({
    model: LoginModel,
    events: {
        'click #trylog': 'log'
    },
    el: '#content',
    render: function() {
        var that = this;
        var template = _.template($('#loginpage').html());
        that.$el.html(template);
        //router.navigate('admin', true); 
        var test = new UsersCollection();
        test.fetch({
            success: function(data) {
                console.log(data);
            }
        });
    }

});
var AdminView = Backbone.View.extend({

    el: "#content",
    render: function() {

        var that = this;
        var template = _.template($('#adminpage').html());
        that.$el.html(template);
        var test = new UsersCollection();

        test.fetch({
            success: function(data) {
                console.log(data);
                //var template = _.template($('#users_table').html(), {
                // test: test.toJSON()
                //});
                //that.$el.html(template);
            }
        });

        /*this.model = new UsersCollection();
        this.model.on("change", this.render, this);
        this.model.fetch();
        this.model.parse();
        var usersCollection = new UsersCollection();
        usersCollection.fetch({
            success: function(users) {
                var template = _.template($('#users_table').html(), {
                    users: usersCollection.toArray()
                });
                that.$el.html(template);
            }
        });*/
    }
});


var CookerView = Backbone.View.extend({

el: '#content',
render: function() {
var that = this;
var template = _.template($('#cookerpage').html());
that.$el.html(template);
var dishes = new DishesCollection();
dishes.fetch({
success: function(data) {
console.log(data);
}
});
var categories = new CategoriesCollection();
categories.fetch({
success: function(data) {
console.log(data);
}
});

}

});

var WaiterView = Backbone.View.extend({

el: '#content',
render: function() {
var that = this;
var template = _.template($('#waiterpage').html());
that.$el.html(template);

}

});

var loginView = new LoginView();
var adminView = new AdminView();
var cookerView = new CookerView();
var waiterView = new WaiterView();

router.on("route:index", function() {
loginView.render();
});

router.on("route:admin", function() {
adminView.render();
});

router.on('route:cooker', function() {
cookerView.render();
});

router.on('route:waiter', function() {
waiterView.render();
});

Backbone.history.start();

Там многое закоментировано - просто эксперименты, авось прошло бы :)

[Константин Китманов]

jsbin.com/kogib/2/edit ваш код, очищенный от несущественного и отформатированный и с фейковыми данными. Все работает.

[semolex]

Спасибо вам!