Usefull only with generator-sp.
Install it from bower.
bower install snp-component-list --save
Add js requirements reference to main.coffee
...
require.config
paths:
...
'ListComponent': "#{VENDOR_PATH}/snp-component-list/dist/ListComponent"
...
Add component region in view, set to some collection into scope
coffee:
ListComponent = require "ListComponent"
SampleModel = Backbone.Model.extend
defaults:
title: ''
SampleCollection = Backbone.Collection.extend
model: SampleModel
ListPage = _Page.extend
template: "#ListPage"
className: "list_page"
regions:
list:
el: '[data-view-list]'
view: ListComponent
scope: ->
{collection: @sampleCollection}
scope: ->
@sampleCollection = new SampleCollection
sampleData = ({title: "Sample #{i}"} for i in [1..5])
@sampleCollection.add sampleData
Create region in markup. Write itemView
template in region.
jade:
h1 List Component
ul(data-view-list-1)
li(data-bind='text: title')
Result:
<div class="list_page">
<h1>List Component</h1>
<ul data-view-list="">
<li>Sample 1</li>
<li>Sample 2</li>
<li>Sample 3</li>
<li>Sample 4</li>
<li>Sample 5</li>
</ul>
</div>
You can set custom itemViews.
ItemView = Backbone.Epoxy.View.extend
# some code here
ItemView = _Page.extend
...
regions:
...
list:
el: '[data-view-list]'
view: ListComponent.extend
itemView: ItemView
scope: ->
{collection: @sampleCollection}