バックボーンビュー内でjQueryでコンテンツ編集可能にする

Question

Backbone.jsを学ぶために基本アプリを作成しています。私のコードでは、私は次のテンプレートを持っています。

<script type="text/template" id="userTemplate"> 
    <span class="nome"><%= nome %></span> 
    <span class="sobrenome"><%= sobrenome %></span> 
    <a href="#" class="editar">Editar</a> 
    <a href="#" class="remover">Remover</a> 
</script> 

.editarクリックイベントハンドラ：

editar: function(ev) { 
    ev.preventDefault(); 
    var style = { 
     color: 'green', 
     height: '70px', 
     border: '2px solid green' 
    }; 

    $('.sobrenome').attr('contenteditable', true).focus(); 
    $('.sobrenome').css(style); 
}, 

私はjQueryのcss()を使用してcontenteditableのスタイルを設定するが、何らかの理由で、CSSはコンテンツに適用されませんしようとしています。

this.$('.sobrenome').attr('contenteditable', true).css(style).focus(); 

何が問題なのですか。私の見解では、すべてが大丈夫です。

Answer 1

をおバックボーンを使用しているので、私は私が提供しようと思いましたcontenteditable属性を切り替えるシンプルなバックボーンビューで、デフォルトでCSSでスタイル設定されています。

JavaScriptをCSSで適用しないでください。可能であれば、スタイルとロジックが完全に分離された状態に保たれるように、代わりにクラスを切り替えてください。

contenteditableがtrueの場合にのみスタイルを設定するには、次のセレクタを使用します。

[contenteditable="true"] { 
    /* css */ 
} 

私は例のためにコードを簡略化しました。ユーザーが要素の外側をクリックしたときに、contenteditableを削除する単純なblurハンドラを追加しました。

var ContentEditableView = Backbone.View.extend({ 
 
    template: _.template($('#userTemplate').html()), 
 
    events: { 
 
    "click .edit": 'onEdit', 
 
    "blur .content": 'onEditDone' 
 
    }, 
 
    render: function() { 
 
    this.$el.html(this.template({ 
 
     content: "test", 
 
     nome: "test nome", 
 
    })); 
 

 
    // caching jQuery object is better than querying the DOM each time. 
 
    this.$content = this.$('.content'); 
 
    return this; 
 
    }, 
 

 
    onEdit: function(e) { 
 
    e.preventDefault(); 
 
    this.$content.attr('contenteditable', true).focus(); 
 
    }, 
 
    onEditDone: function() { 
 
    this.$content.attr('contenteditable', false); 
 
    } 
 
}); 
 

 
var view = new ContentEditableView({ 
 
    el: $('#app') 
 
}); 
 
view.render();

/* keep CSS out of the JS */ 
 
[contenteditable="true"] { 
 
    color: green; 
 
    height: 70px; 
 
    border: 2px solid green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 

 
<div id="app"></div> 
 

 
<script type="text/template" id="userTemplate"> 
 
    <span class="content"><%= content %></span> 
 
    <a href="#" class="edit">Edit</a> 
 
</script>

Answer 2

問題は、この部分のようだ：私はあなたがjQueryのセレクタでネイティブthisを組み合わせることができます信じていません

this.$('.sobrenome') 

、あなたはjQueryので働くことができるものにthisを回し、そうしようとする必要があります次...

$(this).$('.sobrenome') 

あなたはJavaScriptで.と連結していないので、しかし、それさえも変更を加えることは意味がありません。そのような連鎖セレクタは、何もすることはほとんどありません。

Answer 3

これはあなたの目標ですか？私はクラスのスタイルを入れて、不要な削除（？）this

$('.sobrenome').attr('contenteditable', true).focus();

.sobrenome{ 
 
    color: green; 
 
    height:70px; 
 
    border:2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sobrenome">asasf</div>

Answer 4

var style = { 
 
    color: 'green', 
 
    height:'70px', 
 
    border: '2px solid green' 
 
}; 
 

 
$('.sobrenome').each(function() { 
 
    var _state = $(this).attr('data-contenteditable'); 
 
    if (_state === 'true') { 
 
    $(this).css(style).focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sobrenome" data-contenteditable="false">Unstyled element</div> 
 
<div class="sobrenome" data-contenteditable="true">Sstyled element</div>