0

この口ひげのテンプレートが下にあるとしましょう。連絡先とカテゴリは、基本的にオブジェクトの配列です。

<script type="text/mustache" id="contactsList">
  <ul class="clearfix">
    {{#contacts}}
    <li class="contact span8">
    <a href="javascript://" class="remove"><i class="icon-remove"></i></a>
    <form>
    <div class="row">
      <div class="span2">
        <img src="img/canjs.jpg" width="100" height="100">
      </div>
      <div class="span3">
        <input type="text" name="name" placeholder="Add Name" value="{{name}}">
        <select name="category">
          {{#categories}}
            <option value="{{data}}" {{sameCategory category data}}>
              {{name}}
            </option>
          {{/categories}}
        </select>
      </div>
      <div class="span3">
        <label>Address</label>
        <input type="text" name="address" value="{{address}}">
        <label>Phone</label>
        <input type="text" name="phone" value="{{phone}}">
        <label>Email</label>
        <input type="text" name="email" value="{{email}}">
      </div>
    </div>
    </form>
    </li>
    {{/contacts}}
  </ul>
</script>

私がやりたいことは、連絡先|カテゴリとカテゴリ|データを比較して、オプションタグ内で「選択済み」を生成することです。

だから私がしたことは、次のように sameCategory を実装することでした:

can.Mustache.registerHelper('sameCategory', function(contactCategoryId, categoryId) {
console.log(contactCategoryId);
console.log(categoryId);
var result = contactCategoryId == categoryId ? "selected" : "";
console.log(result);
return result;
});

残念ながら、文字列ではなく両方のパラメーターのオブジェクトを取得しているため、等価条件は失敗します。私は何を間違っていますか?registerhelper 以外にこれを行うより良い方法はありますか?

裏付けデータ:

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'
  }
];

これらのコードは、サンプルのDiving into CanJSの記事から引用しました。

4

1 に答える 1