fix example in readme - Githubissues

thurt commented 8 years ago

data.me.name doesn't appear to be defined so changed to this.name -- switched to native DOM API instead of jQuery dependency ($)

thurt commented 8 years ago

RE switched to native DOM API instead of jQuery dependency ($)

Side note: I saw in lib/bind.js you have $ aliased as $ = document.querySelectorAll.bind(document);.

Showing the alias assignment looks more straightforward I think:

var $ = document.querySelector.bind(document);
$('form').onsubmit = function (event) {
  event.preventDefault();
  player.skills.push($('#newSkill').value);
  this.reset();
}

thurt commented 8 years ago

Here is the HTML I made up for this example. I didn't see it linked anywhere in the project--It may be worth putting this into a jsbin and linking it just for completeness

<!DOCTYPE html>
<html>
    <head>
        <title>Readme Example</title>
        <script src="./node_modules/bind.js/lib/bind.js"></script>
    </head>
    <body>
        <div id="name"></div>
        <div id="score"></div>
        <ul id="skills"></ul>
        <form>
            <input type="text" id="newSkill" />
            <input type="submit" id="submit" value="submit" />
        </form>
    <script>
    /* global Bind */
    var player = Bind({
      name: '@rem',
      score: 11,
      location: {
        city: 'Brighton',
        country: 'England'
      },
      skills: [
        'code',
        'chicken',
        'shortness'
      ]
    },
    {
      score: '#score',
      name: '#name',
      'location.city': function (city) {
        // city === this.location.city
        alert(this.name + "'s city is " + city);
      },
      skills: {
        dom: '#skills',
        transform: function (value) {
          return '<li>' + this.safe(value) + '</li>';
        },
      }
    })

    var $ = document.querySelector.bind(document);
    $('form').onsubmit = function (event) {
      event.preventDefault();
      player.skills.push($('#newSkill').value);
      this.reset();
    }
    </script>
    </body>
</html>

remy commented 8 years ago

I took a slightly different PR on this fix, but thank you all the same.

remy / bind.js

fix example in readme #21