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 を使用してブートストラップ タブを作成することでした。

ここでこのフィドルを調べてください: Nested-Unordered list

ありがとうございました。

于 2012-12-04T11:08:40.907 に答える
0

アプリをどのように構成したかを説明していただければ、より適切な回答が得られる可能性があります。

これまでのところ、私が言えることは、モデルを 1 つずつレンダリングすることが最善の戦略であるということです。私が話していることをよりよく理解するには、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 に答える
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 に答える