Javascript backbone.js从JSON呈现多livel ul列表_Javascript_Backbone.js

Javascript backbone.js从JSON呈现多livel ul列表

javascript backbone.js

Javascript backbone.js从JSON呈现多livel ul列表,javascript,backbone.js,Javascript,Backbone.js,我正在从服务器获取对象集合 [ {"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列表 <ul> <li>test1</li> <li>

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

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

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


测试1


测试2
测试3
测试4

如何呈现它？

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

到目前为止，我能说的是，最好的策略是逐个渲染模型。看下面的句子，更好地理解我在说什么

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

el:$（'ul.test0'），
render:function（）{
if（！.isNull（this.model.get（'parent\u id'））{
if（$（“+this.model.get（'parent_id'））.length==0）{
//该类不存在，因为尚未创建
//因此，创建标记
$（“#”+this.model.get（'parent_id'））.append（“”；
}
//现在附加元素
$（'.+this.model.get（'parent_id'））.append（“
”）+this.model.get（'name'）+“”）；
}
否则{
$（this.el）.append（“”+this.model.get（'name'）+“”）；
}
this.el.html（this.template（this.model.toJSON（））；
this.el.toggleClass（'done'，this.model.get（'done'）；
this.input=this.$（'.edit'）；
归还这个；
},

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

  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>


测试1
测试2

测试3
测试4

明白了吗？

希望这有帮助。

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