CODEWITHSUNDEEP
javascripthtmlpolymer
kun
kun

Reputation: 125

What is the difference between Node.bind() and Template Binding

I am reading the docs of Google Polymer,there are two types of data binding,Node.bind() and Template Binding,so, what is the difference between Node.bind() and Template Binding

Upvotes: 0

Views: 338

Answers (1)

addyo
addyo

Reputation: 2918

They're both ways of achieving data-binding. One in the context of DOM nodes and the other in the context of templates.

Node.bind()

Node.bind() allows you to tell DOM nodes to bind a named property to some data that you provide. So below, we're binding the property value (object.path.to.value) to the .textContent in our textNode.

var obj = {
  path: {
    to: {
      value: 'hi'
    }
  }
};

var textNode = document.createTextNode('mytext');
textNode.bind('textContent', obj, 'path.to.value');

This is neat because anytime value changes, Node.bind() keeps your .textContent updated.

TemplateBinding

The Polymer docs state that this extends what you can do with the HTML <template> tag - specifically, giving you access to four new attributes: bind, repeat, if and ref.

So let's say that we wanted to pass a propery foo to a <template> which we would like to use in our template content, but want to keep in sync so that anytime foo changes, the template also gets updated. With bind that's as straight-forward as:

<template bind="{{ foo }}">
  Creates a single instance with {{ foo }} when singleton model data is provided.
</template>

repeat is really useful for when you're working with lists or collections of data - like users:

<template repeat="{{ user in users }}">
  <li>{{user.name}}</li>
</template>

if is really handy for conditional values in templates:

<template if="{{ conditionalValue }}">
  Binds if and only if conditionalValue is truthy. (same as *bind if*)
</template>

and so on. You can find more examples of what can be done with these attributes in the TemplateBinding docs.

Upvotes: 1

Related Questions