使用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在骨干视图中可以满足的样式

回答

相关问题