Question

我从服务器获取对象集合。

[
 {"id":1,"name":"test1","parent_id":null},
 {"id":2,"name":"test2","parent_id":null},
 {"id":3,"name":"test3","parent_id":2},
 {"id":4,"name":"test4","parent_id":2}
]

我想将json转换为ul-list

<ul>
  <li>test1</li>
  <li>
    <ul>
      test2
      <li>test3</li>
      <li>test4</li>
    </ul>
  </li>
</ul>

我如何渲染它？

Answer 1

在与fguillen给出的小提琴一起玩耍之后。我终于解决了我的问题，反过来也解决了主要问题。

我的个人任务是使用backbone.js创建bootstrap tabs。

请在此处查看这个小提琴：Nested-Unordered list

谢谢。

Answer 2

如果您向我们解释您如何组织您的应用，我们可以更好地回答您。

到目前为止，我可以说最好的策略是逐个渲染模型。查看todo example code以更好地理解我在说什么。

我还假设你使用jquery。

在该示例中，您在主应用程序中具有适用于整个集合（addAll）的函数，以及适用于单个模型的另一个函数。

// Add all items in the **Todos** collection at once.
addAll: function() {
  MYCOLLECTION.each(this.addOne);
},

addOne: function(todo) {
  var view = new TodoView({model: MYMODEL});
  this.$("#list").append(view.render().el);
},

在这个框架中，您需要做的就是在单个模型函数的视图中的view.render（）中进行一些编码，就像这样

  el:$('ul .test0'),
  render: function() {
  if (!_.isNull(this.model.get('parent_id')) ){
      if($("." + this.model.get('parent_id')).length == 0) { 
        //the class doesn't exist because the <ul> hasn't been created yet
        //so create the <ul> tag
        $('#'+this.model.get('parent_id')).append("<ul class='"+this.model.get('id')+"'></ul>");
        }
      //now append the <li> element
      $('.'+this.model.get('parent_id')).append("<li id='"+this.model.get('id')+"'>"+this.model.get('name')+"</li>");
      }
  else{
        $(this.el).append("<li id='"+this.model.get('id')+"'>"+this.model.get('name')+"</li>");
        }
  this.$el.html(this.template(this.model.toJSON()));
  this.$el.toggleClass('done', this.model.get('done'));
  this.input = this.$('.edit');
  return this;
},

最后你会有一个像这样的列表

 <ul class='1'>
   <li id='1'>test1</li>
   <li id='2'>test2</li>
   <ul class='2'>
     <li id='3'>test3</li>
     <li id='4'>test4</li>
   </ul>
 </ul>

明白了吗？希望这会有所帮助。

Answer 3

@DanieleB比我快:)但我仍然会暴露我认为非常相似的方法：

var data = [
  {"id":1,"name":"test1","parent_id":null},
  {"id":2,"name":"test2","parent_id":null},
  {"id":3,"name":"test3","parent_id":2},
  {"id":4,"name":"test4","parent_id":2}
]

var NestedView = Backbone.View.extend({
  render: function(){
    this.$el.html( "<ul id='ul-null'></ul>" )
    this.collection.each( function( model ){ this.renderElement( model ) }, this )
  },

  renderElement: function( model ){
    var ul = this.getParentUl( model );
    this.appendElement( ul, model );
  },

  getParentUl: function( model ) {
    var ul = this.$el.find( "#ul-" + model.get( "parent_id" ) );
    if( ul.length == 0 ) {
      this.appendListInElement( model );
      ul = this.$el.find( "#ul-" + model.get( "parent_id" ) );
    }

    return ul;
  },

  appendListInElement: function( model ){
    var li = this.$el.find( "#li-" + model.get( "parent_id" ) );
    li.after( "<ul id='ul-" + model.get( "parent_id" ) + "'></ul>" );
  },

  appendElement: function( ul, model ){
    ul.append( "<li id='li-" + model.get( "id" ) + "'>" + model.get( "name" ) + "</li>" );
  }
});

var elements = new Backbone.Collection( data );
var nestedView = new NestedView({ el: "#wrapper", collection: elements });
nestedView.render();

Check the jsfiddle in work

backbone.js从JSON渲染多级ul-list

3 个答案: