3

I came across rivets library and tried to do simple example. But I had 2 issues:

  1. In tutorial they write "user.name" (with dot) but for me it works only if I write "user:name"
  2. When I change the user.name property why DOM doesn't change?

The code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Example</title>

    <script src="/js/rivets.min.js"></script>
    <script src="/js/jquery-2.0.0.min.js"></script>
    <script>
        $(function() {
            var user = {
                name: 'User'
            }

            $('#userName').keyup(function() { 
                user.name = $('#userName').val();
            });

            rivets.bind($('#user'), { user:user })
        });
    </script>
</head>

<body>
    <input type="text" id="userName" />

    <div id="user">
        <p data-text="user:name"></p>
    </div>
</body>
</html>
Victor
  • 5,073
  • 15
  • 68
  • 120

2 Answers2

5

Disclaimer : This answer was written for Rivets.js < 0.5. If you're using 0.6 or greater, please see the current documentation for adapters instead.

http://rivetsjs.com/#adapters

The . notation uses the adapter to subscribe to the model for changes on a particular attribute. Since you haven't specified an adapter, Rivets.js doesn't know how to read or subscribe to the model for changes. See http://rivetsjs.com/#configure.

The : notation bypasses the adapter and reads the property directly on the model. This is a read-only operation and doesn't perform any further data binding. Without defining an adapter, this is really all you can do and doesn't provide much benefit over static templating unless paired with dependencies or is in the context of an iteration (an adapter is needed to do either of those).

You don't mention any framework or events library that you're using, and from your example you are trying to bind to a plain JavaScript object. Typically, Rivets.js is used alongside another library that provides change events for your models such as Backbone.js or Iota Observable. This is because current browsers don't have the ability to observe plain JavaScript objects for changes... yet... (See Object.observe proposal).

I'd recommend using one of those libraries alongside Rivets.js, but if you're totally set on using plain JavaScript objects, you can look at using something like Watch.js or an Object.observe shim. Either way, you need to define an adapter.

Michael Richards
  • 1,791
  • 14
  • 19
  • I am trying to use rivets with spine.js wich according to the description is supported. I don't know if I understand correctly but in the example posted in the question. I should at least see "User" text within #user > p. I am having a hard time finding trivial examples from which to start. – Macario May 30 '13 at 20:29
  • @Macario See my answer here for a couple of options on using Rivets.js with Spine.js. http://stackoverflow.com/a/17181424/99356 – Michael Richards Jun 19 '13 at 01:20
0

I have created a demo using Rivets.js and Watch.JS ,

http://jsfiddle.net/nsisodiya/njDGA/

```

 var FlatKey = {
    set: function (Obj, keypath, value) {
        //console.log("set : " + keypath + " with " + value);
        var V = Obj;
        var keyArry = keypath.split(".");
        keyArry.filter(function (v, i, A) {
            return i !== A.length - 1;
        }).map(function (v) {
            if (V[v] === undefined) {
                V[v] = {};
            }
            return V = V[v];
        });
        V[keyArry.pop()] = value;
    },
    get: function (Obj, keypath) {
        var V = Obj;
        keypath.split(".").map(function (v) {
            if (V[v] === undefined) {
                return V = "";
            }
            return V = V[v];
        });
        return V;
    },
    findsubPath: function (str) {
        return str.split(".").filter(function (v, i, A) {
            return i !== A.length - 1;
        }).join(".");
    }

};

rivets.configure({
    adapter: {
        subscribe: function (obj, keypath, callback) {
            var subpath = FlatKey.findsubPath(keypath);
            //console.log("subscribed : " + keypath + " : subpath = " + subpath);
            if (subpath === "") {
                watch(obj, keypath, callback);
            } else {
                watch(FlatKey.get(obj, subpath), keypath.split(".").pop(), callback);
            }
        },
        unsubscribe: function (obj, keypath, callback) {
            //console.log("unsubscribed : " + keypath);
            var subpath = FlatKey.findsubPath(keypath);
            if (subpath === "") {
                unwatch(obj, subpath, callback);
            } else {
                unwatch(FlatKey.get(obj, subpath), keypath.split(".").pop(), callback);
            }

        },
        read: function (obj, keypath) {
            //console.log("read : " + keypath + " is " + FlatKey.get(obj, keypath));
            return FlatKey.get(obj, keypath);
        },
        publish: function (obj, keypath, value) {
            FlatKey.set(obj, keypath, value);
            //console.log("publish : " + keypath);
        }
    }
});

``` It support deep level data binding ! Hope this will be useful !

Narendra Sisodiya
  • 381
  • 2
  • 5
  • 13