javascript - 如何在 BackBone View 上正确渲染 $el 元素

Question

我有一个 View ，其中有一个非常基本的网站注册用户列表，以及一些选项，例如在同一个 Backbone View 上一起创建、编辑和删除所有选项，并且正在运行。

由于这对我来说是一个学习练习，现在我想将主视图与详细信息 View 或创建 View 解耦，所以我做的第一件事是创建一个用于创建用户的新 View ，这是一个非常基本的表单上面有 4 个字段。

这是主视图上调用创建用户 View 的代码

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

这是 viewAdminCV() View 上的渲染函数

el: $('#frameDetails'),

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

如果我执行此代码，则不会出现错误，但不会呈现任何内容。如果我更换线路

this.$el.html(templateUserCreate);

与

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

它工作得很好，但我想了解为什么 $el 在这种情况下不起作用，因为我让它在其他 View 中工作。

感谢您的帮助。

如果需要，完整的代码在此链接中 https://github.com/GabrielBarcia/UsersMod/blob/iss3/public/js/views/admin_CV.js

Answer 1

基本上，您发现 #frameDetails 元素“为时过早”。人们很容易忘记，当您使用他们所谓的“jQuery 元素”实例时，您实际上是在运行一个函数。这意味着在您的代码中，当您在该 Backbone.View 上运行“extend”时，它会尝试查找 #frameDetails。您想要的是在 new viewAdminCV() 中找到该元素(如果我听起来令人困惑，我深表歉意......)。

但是要解决这个问题，有三种方法。一种是传统上，您只需要在没有 jQuery 包装器的情况下播放文字字符串，然后 Backbone 就会找到它:

el: '#frameDetails',

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

或者

你可以用处理程序包装它

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

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

或者更巧妙的举动是从“admin.js”文件中注入(inject)它。然后，您无需在 viewAdminCV 类中声明“el”属性:

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