我的骨干模型有一个布尔值(isRegistered)。当我渲染视图时,我想根据布尔值的真/假值选中或取消选中复选框。Backbone.js - 检查复选框的最佳方法是什么
我现在的工作是这样的:
<input id="isRegisteredCheckbox" checked="<%= isRegistered ? 'checked': ''"/>
这不起作用,因为根据W3C规范checked属性需要完全去除,以取消选中的复选框。
我该如何使用骨干模板做到这一点?
我的骨干模型有一个布尔值(isRegistered)。当我渲染视图时,我想根据布尔值的真/假值选中或取消选中复选框。Backbone.js - 检查复选框的最佳方法是什么
我现在的工作是这样的:
<input id="isRegisteredCheckbox" checked="<%= isRegistered ? 'checked': ''"/>
这不起作用,因为根据W3C规范checked属性需要完全去除,以取消选中的复选框。
我该如何使用骨干模板做到这一点?
你不需要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 }}>
使用此方法无需在模板中使用混乱的条件。
你可以使用一个测试附上checked='checked'
<input id="isRegisteredCheckbox" <% if (isRegistered) { %>checked="checked"<% } %> />
我用一个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()));
}
});
我有,我继承别人的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用户浪费自己的生命的力量小时!
这是一个非常简单的方法。
<input <% if(isRegistered) print("CHECKED"); %> type="checkbox" id="isRegisteredCheckbox" />
注意,我使用<%且不<(%)=为条件。
你可以只设置isRegistered的值设置为 “在你的模型,并呼吁
<input id="isRegisteredCheckbox" <%= registered %> />
的东西,如
serialize: function() {
var isChecked = (isRegistered) ? "CHECKED" : "";
return {registered : ischecked};
},
value =“<%= item.id%>”/> – 2015-04-13 19:18:16