javascript - 主干不渲染 $el 但可以直接引用元素

Question

这让我很生气，正在阅读此站点上的示例，但无法弄清楚它为什么会这样工作。我想将值传递回我的视图，该视图具有可用于更改值的按钮。如果我使用以下

   this.$el.empty().html(view.el)

View.el 包含正确的 html，但未在屏幕上呈现。如果我使用以下

    $("#handicap").html( view.el);

值会显示在屏幕上，但即使我在 html 代码中添加了 onclick 函数，事件也不会再被拾取。

理想情况下，我想让 this.$el.empty().html(view.el) 工作。它与上下文有关，但不明白为什么。

我在这里创建了一个 jsbin http://jsbin.com/iritex/1/edit

如果我必须使用 $("#handicap").html(view.el)，我是否需要做一些特殊的事情来取消绑定事件。我试过取消所有的委托，但这也没有成功。

谢谢

score 4 · Accepted Answer

Backbone View 的 el 属性将始终包含对有效 DOM 对象的引用。但是，该 DOM 对象可能在也可能不在您的显示树中。您可以确保它在需要时出现在显示树中。此功能允许 Backbone 保持其 View 元素的状态，而无需将其呈现到屏幕上。例如，您可以有效地在屏幕上添加和删除视图。

有几种方法可以将 View 的元素放入显示树中。

1) 通过将 jquery 选择器作为“el”属性传递给初始化程序，将视图与页面上现有的 DOM 元素相关联。

var view = new MyView({el: '#MyElementSelector'});

2) 通过将 jQuery 选择器硬编码到视图的“el”属性中，将视图与页面上现有的 DOM 元素相关联。

var MyView = Backbone.View.extend({
  el: '#MyElementSelector'
});

3）从另一个视图中将其渲染到页面

var view = new MyView();
view.render();
this.$el.empty().html(view.el);

如果您有兴趣，我会在我整理的Backbone Demo中展示示例。

score 0 · Accepted Answer

您需要将两个视图都放入 DOM。无论您在哪里创建上面的视图，都this需要将其插入到 DOM 中。如果你这样做，那么第一行就可以正常工作this.$el.empty().html(view.el)。

2 回答 2