使用jQuery在骨干视图中可以满足的样式

  • Z时代
  • 2024-01-10
  • 分类：问答

我创建了一个基本应用程序来学习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();

出了什么问题？在我看来，一切都很好。

回答：

由于您使用的骨干，我想我会提供一个简单的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>

回答：

的问题似乎是这一部分：

this.$('.sobrenome')

我不相信你可以用jQuery选择结合本地this，你需要把this到jQuery的东西可以工作，所以尝试下面...

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

然而，即使做出这样的转变是没有意义的，因为你没有在JavaScript中.串联。像这样的链接选择器不会做任何事情。

回答：

这是你的目标吗？我把风格的一类和去除不必要的（？）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>

回答：

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>

以上是 使用jQuery在骨干视图中可以满足的样式 的全部内容， 来源链接： utcz.com/qa/265355.html

回到顶部