1

我正在使用主干和车把一个月，我遇到了这个问题。

我有从我的模型中得到的这个对象：

Object {list: Object, permissions: Object}
  list: Object
        0: Object
           id: "1"
           name: "cms"
           __proto__: Object
        1: Object
        2: Object
        3: Object
  permissions: Object
         analytics: true
         categories: false
         cms: true
         coupons: false

现在使用车把，我试图找出当相对权限值为 true 时如何检查该框，如下所示：

{{#each list}}
 <tr>
  <th><input type="checkbox" id="{{id}}" 
        {{#each permission}}    
            {{#ifCond this {{name}} }}//that's where my current error is when I try to precompile this template,the syntax is wrong
                checked
            {{/ifCond}}
        {{/each}}
      />{{name}}
  </th>
 </tr>
{{/each}}

ifCond 是我在 handlebars.js 中构建的一个函数：

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

希望有人能帮帮我！！

谢谢！

4

1 回答 1

2

如果一开始没有助手，这就是您编写模板的方式。从这一点开始

没有助手

在您试图迭代对象的模板中，这不是正确的方法。你应该把它留给模板助手来处理传递正确的上下文。

                       ---- This is again wrong ( something in these lines)
                      |                compare="name"
    {{#ifCond this {{name}} }}  
                ^
        ^       -----  Context
        |
   Name of helper
   under which it is 
   registered

当您将值传递给该值时，compare=name该值将被该对象的该键值替换。

但请记住，您已经在迭代list对象的每个循环中。

所以this会指向那个对象。因此，您需要使用../返回父对象的第 1 步，这将使您能够访问权限对象。

{{#ifCond this compare=name }}

将映射到助手的参数。

'ifCond', function(v1, v2, options) {

v1将是this context v2将映射到handlebar options 选项将undefined as no 3rd argument在助手中传递

所以模板将是这种形式

 {{#ifCond this obj=../this compare=this.name}}
  • this - 每个（循环中的当前对象）的上下文
  • obj=将被转储到options.hash对象中。它是主要对象。
  • compare将是name此上下文中的属性

映射到

  'ifCond', function (context, options)

所以你的模板结构如下所示

模板

 <script type="text/template" id="handlebar-template">
       {{#each list}}
           <tr>
             <th>
                 <span>
                     <input type="checkbox" id="{{id}}" 
                     {{#ifCond this obj=../this compare=this.name}} 
                          checked 
                     {{/ifCond}} />
                 </span>
                 <span class="name">{{name}}</span>
             </th>
          </tr>
       {{/each}}
    </script>

帮手

Handlebars.registerHelper('ifCond', function (context, options) {
    var permissions = options.hash.obj.permissions,
        name = options.hash.compare;
    if (permissions[name]){
        return options.fn(this);
    }
    return options.inverse(this);
});

完整代码

// The object in question
var obj = {
    "list": [{
        "id": 1,
            "name": "cms"
    }, {
        "id": 2,
            "name": "analytics"
    }, {
        "id": 3,
            "name": "coupons"
    }, {
        "id": 4,
            "name": "categories"
    }],
        "permissions": {
        "analytics": true,
            "categories": false,
            "cms": true,
            "coupons": false
    }
};

// Model for the Object
var HandlebarModel = Backbone.Model.extend({});

var handlebarModel = new HandlebarModel(obj);

// View that will render the template inside the table
var HandlebarView = Backbone.View.extend({
    el: $('#table'),
    initialize: function () {
        var source = $('#handlebar-template').html();
        this.template = Handlebars.compile(source);
    },
    render: function () {
        var $elem = $('tbody', this.$el);
        $elem.empty();
        $elem.append(this.template(this.model.toJSON()));
    }
});

Handlebars.registerHelper('ifCond', function (context, options) {
    console.log("this context " + this);
    console.log("name -" + options.hash.compare);
    console.log("Main Object - " + options.hash.obj);
    var permissions = options.hash.obj.permissions,
        name = options.hash.compare;
    if (permissions[name]){
        return options.fn(this);
    }
    return options.inverse(this);
});

var handlebarView = new HandlebarView({
    model: handlebarModel
});
handlebarView.render();

检查小提琴

于 2013-08-07T20:12:22.300 回答