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

0

我正在用小提琴检查您的代码，但我无法复制它，尽管您可能会得到 can.computes ，您需要在获得值之前作为函数运行。

然而，话虽如此，使用 can/view/bindings 插件完全不需要帮助程序。只需在您的选择上设置 can-value="category" ，它就会自动神奇地选择正确的选项（并在更改时更新值）。

在小提琴中演示：http: //jsfiddle.net/air_hadoken/g725X/1/

<select name="category" can-value="category"> {{#categories}} <option value="{{data}}" > {{name}} </option> {{/categories}} </select>

于 2014-02-18T01:21:55.913 回答