在 Backbone 视图中使用 jQuery 设置 contenteditable 样式

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

问题好像出在这部分：

this.$('.sobrenome')

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

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

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

Answer 2

这是你的目标吗？我将样式放在 class 中并删除了不必要的（？）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 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 进行风格化.

避免将 CSS 与 JavaScript 一起应用，只要有可能，更喜欢切换类以保持样式和逻辑完全分离。

要仅在 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 设置 contenteditable 样式

Styling contenteditable with jQuery within a Backbone view

javascript

jquery

backbone.js