Как правильно отобразить элемент $ el в BackBone View

0

У меня было представление, где у меня был очень простой список зарегистрированных пользователей на сайте, и некоторые параметры, такие как создавать, редактировать и удалять все вместе на одном и том же макете и работали.

Поскольку это учебное упражнение для меня, теперь я хотел отделить основной вид от представления деталей или создать представление, поэтому в первую очередь я создал новое представление для создания пользователя, который является очень простой формой с 4 полями на Это.

Это код на основном представлении, который вызывает представление пользователя для пользователя

userCreate: function () {
  event.preventDefault();
  var createView = new viewAdminCV();
  createView.render();
}

и это функция рендеринга в представлении viewAdminCV()

el: $('#frameDetails'),

render: function() {
  this.$el.html(templateUserCreate);
}

Нет ошибки при выполнении этого кода, однако ничего не получается. Если я заменю линию

this.$el.html(templateUserCreate);

с

$('#frameDetails').html(templateUserCreate);

он работает отлично, но я хочу понять, почему $ el не работает в этом случае, потому что я работаю в других представлениях.

Цените, что помогаете.

В случае необходимости полный код находится в этой ссылке https://github.com/GabrielBarcia/UsersMod/blob/iss3/public/js/views/admin_CV.js

Теги:
backbone.js

2 ответа

3
Лучший ответ

В принципе, вы обнаруживаете элемент #frameDetails "слишком рано". Легко забыть, что когда вы используете то, что они называют экземпляром "jQuery Element", вы действительно используете функцию. Это означает, что в вашем коде он пытается найти #frameDetails в тот момент, когда вы запускаете "расширяться" на этом Backbone.View. Вы хотите найти элемент в new viewAdminCV() (извиняюсь, если я new viewAdminCV()...).

НО, чтобы исправить это, есть три способа. Один из них традиционно, вам просто нужно играть в литеральной строке без оболочки jQuery, тогда Backbone найдет ее:

el: '#frameDetails',

render: function() {
  this.$el.html(templateUserCreate);
}

ИЛИ

вы можете обернуть это обработчиком

el: function(){
  return $('#frameDetails')
},

render: function() {
  this.$el.html(templateUserCreate);
}

ИЛИ даже перемещение слайкера, вы вводите его из файла "admin.js". Затем вы не объявляете свойство el в классе viewAdminCV:

userCreate: function () {
  event.preventDefault();
  $('#btnUserCreate').prop( 'disabled', true );
  var createView = new viewAdminCV({ el: $('#frameDetails') });
  createView.render();
}
Поделиться
  • 0
    Это отличный ответ. Позже я буду выглядеть лучше и дам вам знать, потому что я сейчас на работе.
  • 0
    Как я уже сказал, очень хороший и полный ответ. Все решения работали хорошо, я предпочитаю либо первое, либо третье. На самом деле, я реализую третий, потому что мне понравилась гибкость. Что я не могу понять, так это то, что у меня точно такая же настройка, которая не работает в этом случае в представлении admin.js, и у меня никогда не было проблем с ним. Почему код хорошо работает для одного представления, а не для другого - для меня загадка. Независимо от того, ценим ваше время и хорошее объяснение возможных решений.
Показать ещё 1 комментарий
-2

У вас уже есть el как объект.

el: $('#frameDetails')

Таким образом, вам не нужно использовать $ el при рендеринге.

Использование:

el: $('#frameDetails'),
render: function() {
  this.el.html(templateUserCreate);
}
Поделиться
  • 0
    То, что вы el: $(...) , не означает, что this.el будет DOM-узлом с jQuery- this.el .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню