npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

b3nd

v1.0.20

Published

knockout-style bindings for Backbone models and views

Downloads

9

Readme

codecov

b3nd

knockout-style bindings for Backbone models and views

(pronounced "bend" — The 3 is for the 3 "b"s in Backbone bindings.)

##installation:

npm install --save b3nd

##requirements b3nd has only been tested when bundled with webpack and when run on evergreen browsers.

##usage:

const b3nd = require('b3nd');

bind.view binds your model's data to DOM elements call bind with your view to bind your view to your model's change events:

const MyView = Backbone.View.extend({
  initialize : function () {
    b3nd(this); // where the magic happens
  },
});

This above code binds your model to your view's DOM elements. To specify how your view should consume the binding, specify a data-model-bind attribute in the element(s) of your view. The syntax of the data-model-bind attribute is that of of a javascript object, but without the outer braces. The key is the name of the binding, and the value is a javascript expression. The binding expression is evaluated in the global scope and has access to a variable called "model" that contains the values of the model to which the element is bound. For example:

<div>My full name is:
  <span data-model-bind='text : model.firstName'>
    <span data-model-bind='text : model.lastName, visible : model.lastName'>
    <span data-model-bind='visible : !model.lastName'>Oops, last name is not set</span>
  </span>
</div>

In this example, whenever firstName or lastName changes in your model, the DOM will automatically update according to the 'text' binding. If lastName is falsy, then "Oops, last name is not set" is shown. For a list of pre-defined bindings, see the bindings object below.

computeds can be specified as a property of the view on which bind is called:

var MyView = Backbone.View.extend({
  computed : {
    fullName : function (attributes) {
      return attributes.firstName + " " + attributes.lastName;
    }
  },
  initialize : function () {
    b3nd(this);
  },
});

The computed callback is passed the result of calling toJSON on the model.

the result of computeds can be referenced in the binding data on a global called computed:

<div data-model-bind='text : computed.fullName'></div>

API

a call to b3nd returns an instance of the internal class B3ndContext, which has the following methods:

  • on: enable the bindings until off is called
  • off: disable the bindings until on is called
  • forceUpdate: force the bindings to update immediately