如何呈现内联的Backbone视图？

我有一点遗留的HTML，通过AJAX返回一个项目列表。如何呈现内联的Backbone视图？

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

我重构了一段HTML以使用Backbone视图。我想立即渲染视图，内联，而不指定选择器。下面是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视图添加到每个列表项目。我想也许有一种简单的方法可以在脚本标签中说出“这个父母”。也许这是我真正的问题...

来源

2014-11-24 Andrew

我拿会一直'document.write'。当你尝试时会发生什么。 – 2014-11-24 19:57:23

但一个视图与DOM节点，而不是一个文本/ HTML的大块。文本的混蛋没有事件或其他任何东西。我认为你需要不断重构。 – 2014-11-24 20:14:30

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>

请注意，这不是骨干路是为了使用。这种内联不适用于事件。

正确的方法是将适当的元素传递给视图的构造函数。或者，您可以将该元素作为另一个孩子附加以保持全部功能：

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

来源

2014-11-24 20:14:37

很确定'view。$ el.html（）'和'view.el'基本相同......我错了吗？ – Andrew 2014-11-24 20:18:25

编号'el'是元素，'$ el'是jQuery包装的元素。请参阅http://stackoverflow.com/questions/10640289/backbone-js-whats-the-difference-between-el-and-el – 2014-11-24 20:21:39

对。 'el'是原始的JavaScript DOM元素，它仍然包含事件。我想我的错误是认为'document.write'会接受一个JavaScript DOM元素，但是只接受HTML作为一个字符串。 – Andrew 2014-11-24 20:32:07

尝试类似这样的操作。

<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>

Here的小提琴与解决方案

来源

2014-11-24 20:21:34 cdanea

如何呈现内联的Backbone视图？

回答

相关问题