单击按钮使标签视图可编辑 - Sproutcore答案

【问题标题】：Make a labelview editable on click of a button - Sproutcore单击按钮使标签视图可编辑 - Sproutcore
【发布时间】：2013-03-03 02:11:51
【问题描述】：

我对sproutcore 很陌生。虽然我知道SC.InlineEditable mixin 和isEditable 字段，但问题是当我单击按钮使labelView 可编辑时。标签保持不变，我必须双击标签才能输入文本。

我想要的是当我点击编辑按钮时，标签应该变成一个文本字段并且应该成为第一响应者，即光标应该在 textfied 上闪烁。

我找不到任何像样的文档（sproutcore 没有多大帮助）或教程来做到这一点。指向此类参考的链接也将非常有帮助。

【问题讨论】：

标签： javascript javascript-framework sproutcore textfield sproutcore-views

【解决方案1】：

根据showcase，您应该可以按如下方式完成此操作：

SC.LabelView.extend({
  classNames: ['my-label-view'],
  isEditable: true,
  layout: { width: 300, height: 16, centerX: 0, centerY: 0 },
  value: 'Double-click this label to edit inline.'
})

如果这不起作用，您能告诉我们您使用的是什么版本的 SC，以及什么浏览器/版本吗？这可能是一个潜在的错误。

【讨论】：

现在正在发生这种情况。我想单击一个按钮而不是单击标签以使该字段可编辑。实际上页面上有多个标签。我想在单击编辑按钮时立即使所有这些都可编辑。
好吧，您可以轻松地单击一个按钮并让它在标签上调用 beginEditing()，但只有其中一个能够设置 firstResponder。查看此链接底部的代码，了解使用 1 个标签视图执行此操作的粗略示例：github.com/sproutcore/showcase/blob/master/views/label_views.js
谢谢。我将从那开始。关于将所有标签变成文本字段的任何指针？
如果您在标签上调用 beginEditing()，它应该会自动变成一个文本字段。您只需要遍历所有这些并调用该方法。如果它们都包含在同一个父视图中，您可以使用父视图的.childViews 属性并快速检查SC.kindOf(view, SC.LabelView) 是否返回true（我认为这是正确的语法）。

【解决方案2】：

对我来说，启用标签感觉就像是在您的应用程序中处于不同的状态。在这种情况下，您最好将按钮的操作与状态图联系起来。因此，您首先创建一个带有 isEditing 属性的控制器，该属性为 false（默认情况下）。

myApp.myController = SC.Controller.create({
  isEditing: false;
});

现在您在当前状态下创建一个函数，该函数由按钮上的操作调用。这将导致进入 EDITING 状态，在 enterState 中将 isEditing 属性设置为 true，在 exitState 中设置为 false。

我不知道如何将标签视图的编辑状态绑定到这个isEditing属性，但是假设这是可能的，您可以通过这种方式同时控制所有字段的编辑状态，并且您将确定在编辑完成后所有字段也将恢复正常。

【讨论】：