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

Question

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

我目前的努力是这样的：

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

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

我如何使用主干模板来做到这一点？

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

我曾经在这种情况下使用 a 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" />

请注意，我使用 <% 而不是 <%= 作为条件。

您可以在模型中将 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 堆栈跟踪。

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

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

无论如何，希望这能帮助一些可怜的谷歌人不要浪费他们的生命力！