使用jQuery在骨幹視圖中可以滿足的樣式

我創建了一個基本應用程序來學習Backbone.js。在我的代碼中，我有以下模板。使用jQuery在骨幹視圖中可以滿足的樣式

<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()但由於某些原因，CSS不會對內容應用到風格contenteditable。

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

出了什麼問題？在我看來，一切都很好。

來源

2017-03-08 adahox_

刪除'this'之前，你的'$（ 'sobrenome'）' – Milanzor

仍然無法正常工作。 –

我從來沒有在腳本標記中看到HTML，所以不知道這是否合法或與您的模板/骨幹有關... – Slime

由於您使用的骨幹，我想我會提供一個簡單的Backbone視圖，該視圖切換contenteditable屬性，並默認使用CSS進行風格化。

避免在JavaScript上應用CSS，並且只要可能，就傾向於切換類，以保持樣式和邏輯完全分離。

只有當contenteditable爲真時，才能使用某種風格，您可以使用以下選擇器。

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

我簡化了代碼的例子。我添加了一個簡單的blur處理程序，用於在用戶單擊元素外部時刪除contenteditable。

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>

來源

2017-03-08 15:28:37

這是一個很棒的答案。我試着做得很好。但你展示了一個示例。謝謝@Emile –

的問題似乎是這一部分：

this.$('.sobrenome')

我不相信你可以用jQuery選擇結合本地this，你需要把this到jQuery的東西可以工作，所以嘗試下面...

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

然而，即使做出這樣的轉變是沒有意義的，因爲你沒有在JavaScript中.串聯。像這樣的鏈接選擇器不會做任何事情。

來源

2017-03-08 14:20:29 Slime

我嘗試刪除此。我也試着用$（this）。$（'。sobrenome'）來做。兩者都沒有成功。 –

@adahox_你將不得不展示更多的代碼，比如HTML，因爲它不清楚你想要的目標。我不知道你是否想要結合選擇器或什麼。 – Slime

我會解釋得更好。你是對的。 –

這是你的目標嗎？我把風格的一類和去除不必要的（？）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>

來源

2017-03-08 14:29:19

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>

來源

2017-03-08 14:34:24

使用jQuery在骨幹視圖中可以滿足的樣式

回答

相關問題