Question

我目前正在meteor中设计一个用户界面，其中包含多个文本输入，其内容在更改时保存到会话变量（keyup事件）。由于preserve-inputs包，这些输入框在聚焦时不会重新渲染。

我现在尝试默认禁用这些输入框并使它们在双击时可编辑（这可能是一个糟糕的选择，但它对于手头的问题是最简单的，并且足以用于初稿 - 也许我'稍后会在UX询问）。但是，在最初禁用时，输入框不保留并在输入单个字符时重新呈现，再次禁用它。

虽然保留不可编辑元素不被重新渲染通常没有意义，但我在代码中找不到任何会区分disabled状态的内容。那么它在哪里，我怎么能绕过这个呢？（当然，我可以在双击/模糊时设置一个disabled会话变量，并将输入框重新渲染为启用状态，但这对我来说似乎过于复杂了。）

以下代码（请注意，它纯粹是客户端JavaScript）会重现此问题。它还会渲染第二个输入框，它永远不会被禁用，但也只能在双击后才能访问。这可以按预期工作而无需重新渲染。现场演示部署到http://preserve-disabled-inputs.meteor.com/。

disabled.html：

<head>
  <title>disabled</title>
</head>
<body>
  {{> body}}
</body>

<template name="body">
  <p>Double-click to enter text</p>
  {{> input f}}
  {{> input t}}
</template>

<template name="input">
  <div style="position: relative; width: 400px;">
    <input id="{{id}}" class="input" type="text" value="{{value}}" style="width: 100%;" {{disabled}}/>
    <!-- events on disabled inputs are not triggered -->
    <!-- overlay with transparent div to catch clicks -->
    <div class="catch" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;" />
  </div>
</template>

disabled.js：

if (Meteor.isClient) {
  // Setup for the example
  Session.setDefault('valuefalse', 'This one is preserved and can be edited without problems');
  Session.setDefault('valuetrue', 'This one is not preserved and loses focus on edit');

  Template.body.t = function() {
    return { disabled: true };
  }

  Template.body.f = function() {
    return { disabled: false };
  }

  Template.input.disabled = function() {
    return this.disabled ? 'disabled="disabled" ' : '';
  }

  Template.input.id = function() {
    return this.disabled ? 'd' : 'e';
  }

  Template.input.value = function() {
    return Session.get('value' + this.disabled);
  }

  // Here goes ...
  Template.input.events({
    'dblclick div.catch': function (evt) {
      var input = $('input.input', evt.target.parentNode);
      // Enable text box
      input.removeAttr('disabled');
      input.focus();
      // Don't render the div so the input box becomes accessible
      evt.target.style.display = 'none';
    },
    'keyup input.input': function (evt) {
      Session.set('value' + this.disabled, evt.target.value);
    },
    'blur input.input': function(evt) {
      // Re-render the catcher div
      $('div.catch', evt.target.parentNode).css('display', '');
      // Disable text box, if appliccable
      if (this.disabled) evt.target.disabled = 'disabled';
    }
  });
}

Answer 1

对我来说，唯一可行的选择是定义disabled =＆＃34; true＆＃34;，所以代码如下所示：

disabled="{{#if isDisabled}}true{{/if}}"

如果isDisabled为false，Meteor甚至不会在DOM中呈现/显示禁用的标记（例如，禁用=＆＃34;＆＃34;）。

保留流星中的禁用输入

1 个答案: