title: comparing values from two different context using mustache and canjs
body: <p>Lets say I have this mustache template below. contacts and categories are basically an array of objects:</p>
  
  <pre><code>&lt;script type="text/mustache" id="contactsList"&gt;
    &lt;ul class="clearfix"&gt;
      {{#contacts}}
      &lt;li class="contact span8"&gt;
      &lt;a href="javascript://" class="remove"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;form&gt;
      &lt;div class="row"&gt;
        &lt;div class="span2"&gt;
          &lt;img src="img/canjs.jpg" width="100" height="100"&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;input type="text" name="name" placeholder="Add Name" value="{{name}}"&gt;
          &lt;select name="category"&gt;
            {{#categories}}
              &lt;option value="{{data}}" {{sameCategory category data}}&gt;
                {{name}}
              &lt;/option&gt;
            {{/categories}}
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="span3"&gt;
          &lt;label&gt;Address&lt;/label&gt;
          &lt;input type="text" name="address" value="{{address}}"&gt;
          &lt;label&gt;Phone&lt;/label&gt;
          &lt;input type="text" name="phone" value="{{phone}}"&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type="text" name="email" value="{{email}}"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/li&gt;
      {{/contacts}}
    &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>What I want to do is generate "selected" within the option tag by comparing the contacts|category and categories|data.</p>
  
  <p>so what I did was to implement the sameCategory like this:</p>
  
  <pre><code>can.Mustache.registerHelper('sameCategory', function(contactCategoryId, categoryId) {
  console.log(contactCategoryId);
  console.log(categoryId);
  var result = contactCategoryId == categoryId ? "selected" : "";
  console.log(result);
  return result;
  });
  </code></pre>
  
  <p>Unfortunately, im getting an object for both param instead of strings so my equality condition fails. What am I doing wrong? is there a better way to do this besides registerhelper?</p>
  
  <p>supporting data:</p>
  
  <pre><code>var CONTACTS = [
    {
      id: 1,
      name: 'William',
      address: '1 CanJS Way',
      email: 'william@husker.com',
      phone: '0123456789',
      category: 'co-workers'
    },
    {
      id: 2,
      name: 'Laura',
      address: '1 CanJS Way',
      email: 'laura@starbuck.com',
      phone: '0123456789',
      category: 'friends'
    },
    {
      id: 3,
      name: 'Lee',
      address: '1 CanJS Way',
      email: 'lee@apollo.com',
      phone: '0123456789',
      category: 'family'
    }
  ];
  
  var CATEGORIES = [
    {
      id: 1,
      name: 'Family',
      data: 'family'
    },
    {
      id: 2,
      name: 'Friends',
      data: 'friends'
    },
    {
      id: 3,
      name: 'Co-workers',
      data: 'co-workers'
    }
  ];
  </code></pre>
  
  <p>I took these code from the examples <a href="http://code.tutsplus.com/tutorials/diving-into-canjs--net-25105" rel="nofollow">Diving into CanJS</a> article.</p>