0

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

[
 {"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>

我该如何渲染它？

4

3 回答 3

4

在用 fguillen 给的小提琴玩了 allot 之后。我终于解决了我的问题，反过来也解决了这里的主要问题。

我的个人任务是使用backbone.js创建 引导选项卡。

请在这里浏览这个小提琴：嵌套无序列表

谢谢你。

于 2012-12-04T11:08:40.907 回答
0

@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();
​
​

检查工作中的jsfiddle

于 2012-04-20T14:25:30.373 回答
0

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

到目前为止，我能说的是最好的策略是一个一个地渲染模型。查看todo 示例代码以更好地理解我在说什么。

我还假设您使用 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>

明白了吗？希望这可以帮助。

于 2012-04-20T14:02:14.113 回答