9

私のバックボーンモデルにはブール値（isRegistered）があります。ビューをレンダリングするとき、ブール値のtrue / false値に応じて、チェックボックスをオンまたはオフにします。

私の現在の取り組みは次のようになります。

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

W3C仕様によれば、チェックボックスをオフにするには、チェックされた属性を完全に削除する必要があるため、これは機能しません。

バックボーンテンプレートを使用してそれを行うにはどうすればよいですか？

4

5 に答える 5

8

テストを使用して囲むことができますchecked='checked'

<input id="isRegisteredCheckbox" <% if (isRegistered) { %>checked="checked"<% } %> />
于 2012-04-25T11:11:51.460 に答える
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 }}>

この方法を使用すると、テンプレートで面倒な条件を指定する必要がなくなります。

于 2012-04-25T11:02:46.190 に答える
1

これは非常に簡単な方法です。

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

条件に <%= ではなく <% を使用していることに注意してください。

モデルで isRegistered の値を「CHECKED」または「」に設定して呼び出すことができます

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

のようなもので

serialize: function() {
  var isChecked = (isRegistered) ? "CHECKED" : "";
  return {registered : ischecked};
},
于 2012-12-21T16:51:34.203 に答える
1

Decorator私はこの場合にa を使用していました。ここで、それがどのように見えるかの例を公開します。

// 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() ) );
  }
});
于 2012-04-25T12:04:17.293 に答える
0

私は誰かの 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}

とにかく、貧しい Google 社員が何時間もの生命力を無駄にするのを防ぐ助けになることを願っています!

于 2012-11-16T02:35:51.580 に答える