Question

我有一个视图，我在网站上有一个非常基本的注册用户列表，还有一些选项，比如在同一个Backbone视图上创建，编辑和删除它们并且正在工作。

由于这是我的学习练习，现在我想将主视图从细节视图中分离出来或创建视图，所以我首先要做的是创建一个用于创建用户的新视图，这是一个非常基本的形式上面有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

Answer 1

基本上，您过早地找到#frameDetails元素＆＃34;＆＃34;。很容易忘记，当你使用他们称之为＆＃34; jQuery元素＆＃34;例如，你真的在运行一个函数。这意味着在您的代码中，它会在您运行＆＃34; extend＆＃34;时尝试查找#frameDetails。在那个Backbone.View上。你想要的是在new viewAdminCV()找到元素（如果我听起来很混乱，我道歉......）。

但要解决这个问题，有三种方法。传统上，你只需要在没有jQuery包装器的情况下使用文字字符串，然后Backbone会找到它：

el: '#frameDetails',

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

OR

你可以用处理程序包装它

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

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

或者是一个更平稳的移动，你是从你的＆＃34; admin.js＆＃34;文件。然后你就不会宣布＆＃34; el＆＃34; viewAdminCV课程中的媒体资源：

userCreate: function () {
  event.preventDefault();
  $('#btnUserCreate').prop( 'disabled', true );
  var createView = new viewAdminCV({ el: $('#frameDetails') });
  createView.render();
}

Answer 2

你已经将el作为对象。

el: $('#frameDetails')

因此渲染时不需要使用$ el。

使用：

el: $('#frameDetails'),
render: function() {
  this.el.html(templateUserCreate);
}

如何在BackBone视图上正确呈现$ el元素

2 个答案: