Clone wiki

ExtJSPackages / Escaped binds

This package allows bind expressions with escaped characters. Additionally, it has fixes to allow binding array items by index.

Released under GPLv3.

The main motivation for this package was the retrieval of data from NoSQL stores where some maps' keys where URLs.

In binds definitions you can only escape the following characters: ., \, {, }, : and ! when you want them to be part of the binding token. The escape character is \ , but remember that in javascript you have to write \\ in a string to represent a \ (internally it gets stored as one \).

Using, the characters (espace) and ( must be escaped too.

You can have a ViewModel with data like:


Ext.define('My.greatModel', {
    extends: 'Ext.view.ViewModel',

    data: {
        '': 'stuffHere', //Don't need to scape keys in the ViewModel
        'other\\th}ing': 'more stuff', // In javascript, a backslash in a text must be scaped: '\\' = '\'
                                       // and the key here is 'other\th}ing'
        'id.number': 23

and define binds to that keys. For example:


bind: '{http\\://www\\.google\\.com}' // Escaped dots of the URL means they are a single key token
bind: '{other\\\\th\\}ing}'   // Notice the double-escape needed by javascript (equals to) '{other\\th\}ing}'
                              // that will match the key 'other\th}ing' in the ViewModel

You can bind templates too:


bind: 'The value of \\{x\\} is {x}.' // Only the last {x} is a binded token. the former is escaped and will
                                     // be shown as: "The value of {x} is blahblahblah."
                                     // Remember to double escape backslashes in javascript strings
                                     // in your code.
bind: 'And with {foo\\:bar:number(5,1)}' // the key is 'foo:bar', so we have to escape the colon to
                                         // disambiguate from the format

You can make deep bindings too:


bind: '{\\.number.exists}' // where the keys in the ViewModel are: 'user', 'id.number' and 'exists'

Maybe you need to create at runtime a token for a bind. For that, Ext.String is overriden to have a escaping method. You can escape a subexpression and concatenate it before binding:



data: {
    token: {
        'another.andanother' : value

bind: '{token.' + Ext.String.escapeBind('another.andanother') + '}' // = '{token.another\.andanother'

##How to install##

Install the package:

$ sencha repo add alfonsonishikawa
$ sencha package install nishilua-escaped-binds
Add it to your app.json:
    requires: [
        .... ,
It will be downloaded automatically when doing:
$ sencha app watch
And you can start to use it.


  • ExtJS
  • ExtJS