Book Image

Meteor Cookbook

By : Isaac Strack
Book Image

Meteor Cookbook

By: Isaac Strack

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Meteor Cookbook
Isaac Strack
May, 2015 | 364 pages
No titles found
Table of Contents (19 chapters)
Meteor Cookbook
Meteor Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Optimizing Your Workflow
Optimizing Your Workflow
Introduction
Installing Meteor
Finding documentation for Meteor
Getting help with questions
Setting up your project file structure
Setting up your development environment
Using the web console
Deploying a test app to Meteor
Deploying to Meteor using a CNAME redirect
Deploying to a custom hosted environment
Deploying with Meteor Up (MUP)
Using CoffeeScript
Using CSS compilers
2
Customizing with Packages
Customizing with Packages
Introduction
Adding Meteor packages
Removing Meteor packages
Discovering new packages with Atmosphere
Creating a multipage application with Iron Router
Building a custom package
Using npm modules
Publishing custom packages to Atmosphere
3
Building Great User Interfaces
Building Great User Interfaces
Introduction
Inserting templates with Spacebars
Inserting raw HTML using triple braces
Creating dynamic lists
Building a smooth interface with Bootstrap
Creating customized global helpers
Creating custom components
Using reactivity with HTML attributes
Using dynamic templates
Animating DOM elements
4
Creating Models
Creating Models
Introduction
Implementing a simple collection
Using the Session object
Sorting with MongoDB queries
Filtering with MongoDB queries
Creating upsert MongoDB queries
Implementing a partial collection
5
Implementing DDP
Implementing DDP
Introduction
Reading the DDP stream
Using client-only collections
Implementing multiserver DDP
Integrating DDP with other technologies
6
Mastering Reactivity
Mastering Reactivity
Introduction
Creating and consuming a reactive value
Using Ajax query results in ReactiveVar
Making a custom library reactive
Updating Blaze templates without Mongo
Using inline data to modify UI elements reactively
Integrating a jQuery UI
7
Using Client Methods
Using Client Methods
Introduction
Creating dynamic graphs with SVG and Ajax
Using the HTML FileReader to upload images
Creating a coloring book with the Canvas element
8
Integrating Third-party Libraries
Integrating Third-party Libraries
Introduction
Using npm packages directly
Building graphs with D3.js
Creating cutting-edge UIs with Polymer
9
Securing Your Application
Securing Your Application
Introduction
Basic safety – turning off autopublish
Basic safety – removing insecure
Securing data transactions with allow and deny
Hiding data with façades
Protecting the client with browser-policy
10
Working with Accounts
Working with Accounts
Introduction
Implementing OAuth accounts packages
Customizing the accounts login
Performing two-factor authentication
11
Leveraging Advanced Features
Leveraging Advanced Features
Introduction
Building custom server methods
Creating custom EJSON objects
Handling asynchronous events
Using asynchronous functions
12
Creating Useful Projects
Creating Useful Projects
Introduction
Creating RESTful web services
Creating a complete app with Iron Router
Deploying apps to mobile devices
Adding social sharing
Index
Index

Using reactivity with HTML attributes

One of the hidden gems in Meteor is the extremely granular control you have over how HTML is rendered. Blaze was designed in such a way that you can modify, add, or remove HTML element attributes dynamically without affecting anything else in the DOM! This recipe will walk you through the use of dynamic, reactive data inside element attributes.

Getting ready

We will use the codebase from the Creating custom components recipe, the previous recipe in this chapter. Please follow that recipe first or download the corresponding codebase.

How to do it…

Proceed with the following steps to use reactivity with HTML attributes:

  1. We first need to create a new navcolor template. Open navbar.html in your [project root]/client folder and add the following code:

    <template name="navcolor">
    <div class="nav navbar-form navbar-right">
        <input type="checkbox" id='bgCheck' checked="{{useBG}}"/>
        <input type="text" id='bgColor' placeholder...
Previous Section
End of Section 9
Next Section