Question

我的骨干模型有一个布尔值（isRegistered）。当我渲染视图时，我希望根据布尔值的true / false值选中或取消选中复选框。

我目前的努力是这样的：

<input id="isRegisteredCheckbox" checked="<%= isRegistered ? 'checked': ''"/>

这不起作用，因为根据W3C规范，需要完全删除checked属性以取消选中复选框。

如何使用骨干模板？

Answer 1

您可以使用测试将checked='checked'

括起来

<input id="isRegisteredCheckbox" <% if (isRegistered) { %>checked="checked"<% } %> />

Answer 2

您不需要checked=部分。如果需要检查，只需在标签中打印出来。

<小时/> 的修改

现在我们已经确定只打印“已检查”是有效的html，您可以尝试简单：

渲染：

var registered;
var tmpl = _.template(your template);
isRegistered ? registered = 'checked' : registered = '';
var tmpl_data = _.extend(this.model.toJSON(), {registered: registered}); // or whatever values you need to add
$(this.el).html(tmpl(tmpl_data));

模板：

<input type="checkbox" {{ registered }}>

使用此方法无需在模板中使用混乱的条件。

Answer 3

我曾经在这种情况下使用Decorator。我在这里公开了一个如何看起来的例子：

// code simplified and not tested
var MyModelDecorator = Backbone.Model.extend({
  initialize: function( opts ){
    this.model = opts.model;
  },

  toJSON: function(){
    var json =
      _.extend(
        this.model.toJSON(),
        {
          checked: this.checked(),
          css_classes: this.cssClasses()
        }
      );

    return json;
  },

  checked: function(){
    result = "";
    if( this.model.get( "checked" ) ) result += "checked=\"true\"";
    return result;
  },

  cssClasses: function(){
    result = "";
    if( this.model.get( "checked" ) )         result += " checked";
    if( this.model.get( "key" ) == "value" )  result += " important";
    return result;
  }
});

我添加了额外的css_classes 装饰器属性，因此您可以看到此方法可以成为多种情况下的常用解决方案。

您的View.render可能如下所示：

// code simplified and not tested
var myView = Backbone.View.extend({
  template: _.template( "<input id=\"isRegisteredCheckbox\" <%= checked %> class=\"<%= css_classes %>\" />" ),

  render: function(){
    var decorator = new MyModelDecorator({ model: this.model });
    this.$el.html( this.template( decorator.toJSON() ) );
  }
});

Answer 4

这是一种非常简单的方法。

<input <% if(isRegistered) print("CHECKED"); %>  type="checkbox" id="isRegisteredCheckbox" />

请注意，我使用＆lt;％而不是＆lt;％=来表示条件。

你可以在模型中将isRegistered的值设置为“CHECKED”或“”并调用

<input id="isRegisteredCheckbox" <%= registered %> />

类似

serialize: function() {
  var isChecked = (isRegistered) ? "CHECKED" : "";
  return {registered : ischecked};
},

Answer 5

我有一个类似的问题，我继承了某人的Django + hamlpy（HAML）+ Backbone.js + Undescore.js和Mustache模板（真是一团糟！）

hamlpy中的Haml处理并不完全像：

%input{ :checked => {{isChecked}} ? true : None }

或任何类似的事情。我有一个Django hamlpy stacktrace。

我设法通过使用Mustache的倒置部分来破解它（参见：http://mustache.github.com/mustache.5.html）

{#isChecked}
%input{:checked => 'true' }
{/isChecked}
{^isChecked}
 %input{ ... without the checked attribute ... }
{/isChecked}

无论如何，希望能帮助一些贫穷的Google员工浪费几个小时的生命力！

Backbone.js - 检查复选框的最佳方法是什么

5 个答案: