如何以内联方式呈现主干视图

How to render a Backbone view inline?

本文关键字：视图 方式呈      更新时间：2023-09-26

我有一些遗留的HTML，它通过AJAX返回项目列表。

var xhr = $.get('/example');
xhr.done(function(data){
  $('#container').html(data);
});

我已经重构了一段 HTML 以使用骨干视图。我想立即内联呈现视图，而无需指定选择器。下面是 HTML 的简化示例：

<ul>
  <li>
    Some stuff here
    <script>
      var view = new MyView();
      // render the view and put the html right here!
    </script>
  </li>
</ul>

我尝试了类似document.write(view.render().el)但无法正常工作。

如何以内联方式呈现主干视图？

更新：此问题的原因是将有多个列表项，并且此视图将呈现多次。我认为没有必要为每个列表项创建一个唯一的 ID，只是为了将 Backbone 视图附加到每个列表项。我想也许有一种简单的方法可以在脚本标签中说"这个父级"。也许这是我真正的问题...

render函数应将视图呈现为其 $el 属性。

渲染后，您可以访问$el以获取渲染的视图。您可以像这样"内联"编写它：

<ul>
  <li>
    Some stuff here
    <script>
      var view = MyView();
      view.render();
      document.write(view.$el.html());
    </script>
  </li>
</ul>

一个完整的例子：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/template" id="search_template">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>
<script type="text/javascript">
    SearchView = Backbone.View.extend({
        render: function() {
            var template = _.template($("#search_template").html(), {});
            this.$el.html(template);
        }
    });
    var search_view = new SearchView();
    search_view.render();
    document.write(search_view.$el.html());
</script>

请注意，这不是使用Backbone的方式。此内联不适用于事件。

正确的方法是将适当的元素传递给视图的构造函数。或者，您可以将该元素追加为另一个元素的子元素以保留完整功能：

document.getElementById('foo').appendChild(myView.$el);

尝试这样的事情。

<ul>
  <li>
    Some stuff here
    <script id="use_an_id_for_safety">
      // I assume you instantiate correctly, but I explicitly use new here
      var view = new MyView({el: $(document.currentScript)});// or use the id
      view.render();
      // render the view and put the html right here!
    </script>
  </li>
</ul>

这是解决方案的小提琴

相关文章：