Skip to content

valtech-nyc/es6-backbone-play-ground

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Installation and execution

This documentation is WIP

# Install all the packages
npm i

# Start the environment
npm start

# Start the server
node server.js

Creating a template

The system is using mustache as a templating engine, for more information please have a look at https://mustache.github.io/

<div class="component-posts" data-view="Posts" data-collection="Posts">
   
</div>

Note on data-view='Posts' and data-collection='Posts'

import {View} from 'backbone';
import {clientName} from '../../index';
import _ from 'underscore';
import $ from 'jquery';
import {store} from '../../store/AppStore';

require('./Posts.scss'); // Styling import

class Posts extends View {
    /**
     * Underscore template declaration
     */
    template = _.template($('#component-post').html());
    
    /**
    * No Need to use initialize anymore :)
    */
    constructor(options) {
        super({
            ...options,
            events: {
                'click .post': 'click',
            }
        });
        
        // TODO: move collection to store
        store.subscribe(this.render.bind(this));

        this.collection.fetch({
            success: (data) => {
                this.render();
            }
        })
    }
    
    click () {
          alert('clickced');
    }

    render() {
        const {currentFilter} = store.getState();
        const posts = this.collection.toJSON().filter(post => post.title.indexOf(currentFilter) > -1);
        this.$('.pure-g').html(this.template({ data: posts }));
    }
}

clientName.views.Posts = Posts;

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published