Взаимосвязь между македонскими макетами

Question

Я младший разработчик javascript, получил стажировку в компании, которая использует Backbone и Marionette. Моя первая задача - создать функции поиска, фильтрации и сортировки в коллекции, основанной на некоторых входах. Дело в том, что у меня есть 2 разных представления: один itemView отображает поля ввода (поле поиска, сортировка и т. Д.), А коллекцияView отображает коллекция.

У меня есть анализирующий агрегатор событий, метод listenTo и т. Д., Чтобы найти способ заставить CollectionView прослушать отправку, щелкнуть события в элементе itemView, чтобы он мог визуализировать себя соответствующим образом. Например, когда пользователь вводит «лягушку» в поле поиска, коллекцияView отображает модели, содержащие эти критерии, если пользователь нажимает последнюю измененную опцию сортировки, коллекцияView делает это таким образом.

Любое предложение действительно приветствуется. Спасибо заранее.

Answer 1

В основном Marionette делает все для вас, вам просто нужно правильно инициализировать коллекцию.

Вы можете указать, какой ребенок вида события на ваш взгляд коллекции должен слушать (во всяком случае она слушает некоторые события по умолчанию по умолчанию)

Вот пример функции поиска и обработки событий взглядов ребенка:

HTML

<script id='itemViewTemplate' type = "text/template"> 
    <div class='itemView'><%= title %></div> 
</script> 
<script id='collectionViewTemplate' type = "text/template"> 
    <div class="collectionView"></div> 
</script> 

<input value='' id='search' placeholder='search'> 

Javascript

// our data to show and filter 
var data = [ 
    {title: "title 1"}, 
    {title: "title 2"}, 
    {title: "title 3"} 
]; 

// item model 
var FooBar = Backbone.Model.extend({ 
    defaults: { 
    title: "" 
    } 
}); 

// collection of items 
var FooBarCollection = Backbone.Collection.extend({ 
    model: FooBar 
}); 

// item view 
var FooView = Marionette.ItemView.extend({ 
    template: "#itemViewTemplate", 

    events: { 
     "click": "_onClick" 
    }, 

    _onClick: function() { 
     this.trigger('click', this); // here we trigger event which will be listened to in collection view 
    } 

}); 

// collection view 
var MyCollectionView = Marionette.CollectionView.extend({ 
    childView: FooView, 
    template: "#collectionViewTemplate", 

    childEvents: { 
     'click': '_onItemClick' // listen to any child events (in this case click, but you can specify any other) 
    }, 

    _onItemClick: function(item) { 
     $('.message').text("item clicked: " + item.model.get("title")); 
     console.log(arguments); // event handler 
    } 
}); 

// init our collection 
var myCollection = new FooBarCollection(data); 
// another collection which will be filtered 
var filterCollection = new FooBarCollection(data); 

// init collection view 
var myCollectionView = new MyCollectionView({ 
    collection: myCollection 
}); 

// render collection view 
$("body").append(myCollectionView.render().$el); 

// search 
$('#search').change(function() { 
    var value = $(this).val(); // get search string 
    var models = filterCollection.where({ 
     title: value 
    }); // find models by search string 

    value ? myCollection.reset(models) : myCollection.reset(filterCollection.models); 
// reset collection with models that fits search string. 
// since marionette collection view listens to all changes of collection 
// it will re-render itself 
// filter collection holds all of our models, and myCollection holds subset of models, you can think of more efficient way of filtering 
}); 
// just to show click event info 
$('body').append("<div class='messageContainer'>Click on item to see its title:<div class='message'></div></div>"); 

вид коллекция марионеток слушает все MyCollection событий, для exaple

Если вы напишете

myCollection.add({title: 'title 4'}); 

Он будет автоматически оказывать новый itemView в целях сбора. То же самое для удаления, сброса и других defaut Backbone.Collection методов (которые запускают события, и марионетка слушает их);

Вот jsfiddle: http://jsfiddle.net/hg48uk7s/11/

А вот документы на марионетке:

http://marionettejs.com/docs/v2.4.3/marionette.collectionview.html#collectionviews-childevents

Я предлагаю, чтобы начать читать документы на marionnet из НАЧАЛА, потому что CollectionView наследует многое из ItemView и ItemView наследуют много от View и т. д., чтобы вы могли знать все функции Collection.View.

UPDATE

Может быть, я неправильно понял вопрос немного, вам нужен связь между CollectionView и каким-либо другим видом (itemView в этом случае другой вид, а не вид CollectionView использует для визуализации своих детей, это то, что я думал).В этом случае, здесь обновленная скрипка:

http://jsfiddle.net/hg48uk7s/17/

Вам нужны третье лицо для обработки связи между CollectionView и SearchView, например. Обычно это какой-то контроллер, который слушает события searchView, а затем вызывает некоторый обработчик, предоставляя управление коллекции, которое использует значение для фильтрации.