Магистральная магистраль Рекурсивный список

У меня возникают проблемы с правильной настройкой рекурсии в марионетке. Я видел ответы на некоторые другие вопросы, но я разбил это на чрезвычайно простой пример в http://jsfiddle.net/vZY2v/. Я знаю, что секрет заключается в использовании композитов, но я не ударил по правильному пути.Магистральная магистраль Рекурсивный список

Я хочу, чтобы производить N-уровня вложенных списков, таких как:

<ul> 
    <li>Bob</li> 
    <ul> 
     <li>Jim</li> 
     <li>Jane</li> 
    </ul> 
</ul>

HTML, выглядит следующим образом:

<body> 
    <div id='myContainer'></div> 
    <script type='text/template' id='my-item'> 
     <%= name %> 
    </script> 
</body>

Вот код:

var jsonData = [{ 
name: 'Bob', 
children: [{ 
    name: 'Jim' 
}, { 
    name: 'Jane' 
}] 
}, { 
name: 'Sally', 
children: [{ 
    name: 'Sue', 
    children: [{ 
     name: 'John' 
    }, { 
     name: 'Lisa' 
    }] 
}] 
}]; 

var Item = Backbone.Model.extend({}); 

var ItemCollection = Backbone.Collection.extend({ 
    model: Item 
}); 

var i = new Item(); 

var Manager = new Marionette.Application(); 
Manager.addRegions({ 
    mainRegion: "#myContainer" 
}); 

var RecursiveView = Marionette.CompositeView.extend({ 
    tagName: "li", 
    template: '#my-item', 
    initialize: function() { 
     if (this.model.get('children')) { 
      this.collection = new ItemCollection(this.model.get('children')); 
     } 
} 
}); 

var MotherView = Marionette.CollectionView.extend({ 
    tagName: "ul", 
    itemView: RecursiveView 
}); 

var myColl = new ItemCollection(jsonData); 
var x = new MotherView({ 
    collection: myColl 
}); 

Manager.mainRegion.show(x);

Нужный выход как показано ниже:

Боб
- Джим
- Джейн
Салли
- Сью
  - Джон
  - Лиза

источник

2014-01-19 rycel

Я думаю, что могу ответить на мой собственный вопрос здесь, обновленный пример: http://jsfiddle.net/nDfCT/1/.

Секрет двигался тег LI в шаблон и рендеринг RecursiveView с вместо этого, и добавления функции appendHtml как это:

var RecursiveView = Marionette.CompositeView.extend({ 
    tagName: "ul", 
    template: '#my-item', 
    initialize: function() { 
    this.collection = this.model.children; 
    }, 
    appendHtml: function (collectionView, itemView) { 
    collectionView.$('li:first').append(itemView.el); 
    } 
});

источник

2014-01-20 14:56:14 rycel

Вы абсолютно не нужны переопределить метод appendHtml подобного - это в основном то, для чего предназначен CompositeView.

Я обновил свою скрипку: http://jsfiddle.net/vZY2v/1/

Да, у него есть дополнительный корневой узел, но вы можете легко сделать ваш корневой узел имеет другой шаблон, который не оказывает в li или свойство имени ,

Главное отличие заключается в использовании itemViewContainer, чтобы позволить марионетке вставить ItemViews в нужное вам место, а не делать это самостоятельно.

источник

2014-01-22 00:01:44 Tom

Магистральная магистраль Рекурсивный список

ответ

Смежные вопросы