Skip to content

Instantly share code, notes, and snippets.

@designeng
Last active December 22, 2015 17:49
Show Gist options
  • Save designeng/6509021 to your computer and use it in GitHub Desktop.
Save designeng/6509021 to your computer and use it in GitHub Desktop.
Marionette.CompositeView as Layout for Controls rendering
define ["backbone", "marionette"], (Backbone, Marionette) ->
ControlItemView = Marionette.Layout.extend
template: '<div control="{{controlType}}" model="controlModel"/>'
initialize: (options) ->
onRender: ->
MyCompositeView = Marionette.CompositeView.extend
template: "<ul>
<!-- INVERSION -->
<li id='{{cid}}-2'></li>
<li id='{{cid}}-1'></li>
<li id='{{cid}}-0'></li>
</ul>"
className: "viewCompositeView"
itemView: ControlItemView
initialize: (options) ->
if !@model
@model = new Backbone.Model()
@model.set "cid", @cid
items = [{controlType: "linkControl", controlModel: new Backbone.Model(
text: "test1"
url:"url1"
)}
{controlType: "linkControl", controlModel: new Backbone.Model(
text: "test2"
url:"url2"
)}
{controlType: "linkControl", controlModel: new Backbone.Model(
text: "test3"
url:"url3"
)}]
for item in items
item.controlModel.set {"vent": @}
@collection = new Backbone.Collection(items)
@on "linkControl:click", (evtData)->
console.log "onClickInControl", evtData
appendHtml: (collectionView, itemView, index) ->
collectionView.$el.find("##{@cid}-#{index}").append itemView.el
return MyCompositeView
define ["marionette"], (Marionette) ->
LinkView = Marionette.ItemView.extend
template: "<a href='{{url}}' title='{{title}}' class='{{class}}'>{{text}}</a>"
events:{
"click": "onClick"
}
initialize: (options) ->
@vent = @model.get("vent") if @model
onClick: (e) ->
e.preventDefault()
@vent.trigger "linkControl:click", {text: @model.get "text"}
return LinkView
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment