2012-04-25 144 views
7

我的骨干模型有一个布尔值(isRegistered)。当我渲染视图时,我想根据布尔值的真/假值选中或取消选中复选框。Backbone.js - 检查复选框的最佳方法是什么

我现在的工作是这样的:

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

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

我该如何使用骨干模板做到这一点?

+0

value =“<%= item.id%>”/> – 2015-04-13 19:18:16

回答

7

你不需要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 }}> 

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

+0

虽然您的建议将在浏览器中呈现,但OP提到了'W3C规范'。取决于他所指的检查属性可能需要相应的值(即使是“”)。 – EBarr 2012-04-25 12:25:13

+0

@EBarr它在HTML 4严格,HTML 4过渡和HTML5中有效。我的意思是我猜这有可能在HTML4中无效,但是,如果HTML4严格&过渡,并且HTML 5不是“W3C规范”,我不确定什么构成W3C规范。 – tkone 2012-04-25 12:39:21

+0

呃,让“html 3中无效”......或者,gulp,xhtml ...... – tkone 2012-04-25 12:46:50

7

你可以使用一个测试附上checked='checked'

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

我用一个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())); 
    } 
}); 
0

我有,我继承别人的Django的+ hamlpy(HAML)+ Backbone.js的+ Undescore.js与胡须模板类似的问题(什么乱七八糟的!)在hamlpy

Haml的处理并不完全一样:

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

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

我设法用胡子的反向的段砍(请参阅:http://mustache.github.com/mustache.5.html

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

不管怎样,希望帮助一些贫困的Google用户浪费自己的生命的力量小时!

1

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

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

注意,我使用<%且不<(%)=为条件。

你可以只设置isRegistered的值设置为 “在你的模型,并呼吁

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

的东西,如

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