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 contenteditable来设置css()的样式，但出于某种原因，css不会适用于内容。

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

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

Answer 1

问题似乎是这一部分：

this.$('.sobrenome')

我不相信你可以将原生的this与jQuery选择器结合起来，你需要将this变成jQuery可以使用的东西，所以试试以下......

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

但是，即使进行此更改也没有意义，因为您没有在JavaScript中与.连接。像这样的链接选择器不会做太多任何事情。

Answer 2

这是你的目标吗？我将样式放在一个类中并删除了不必要的（？）this

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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>

Answer 4

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

在Backbone视图中使用jQuery满足样式

4 个答案: