Ember:在没有硬编码的情况下在页面加载时锁定表单“;禁用”;

Ember: Locking a form on page load without hard-coding "disabled"

本文关键字：锁定 加载 表单 禁用 编码 情况下 Ember      更新时间：2023-09-26

我有几个带有多个输入的表单。我的老板让我找到一种方法来禁用表格，并有一个锁定/解锁按钮。因此，用户将转到表单，单击解锁进行更改，然后锁定和/或保存表单。主要问题是试图找出如何在不将"disabled=true"硬编码到所有输入（可能有几百个）的情况下做到这一点。

我有90%的路要走。我有toggleLock操作，我甚至有它，所以即使你在同一条路线内转换到不同的模型，表单也会锁定。问题是表单在第一次加载页面或刷新页面时没有锁定。

这是代码：网址：https://github.com/djbreen7/ember-sandbox

app/templates/meats/view.hbs

<form class="edit-form">
  <div class="form-group">
    <label for="exampleInputEmail1">Meal Name</label>
    {{input type="text" class="form-control" id="" placeholder="" value=model.name}}
  </div>
  ...
  <button id="toggle-lock" type="button" class="btn btn-default" {{action 'toggleLock'}}>Unlock</button>
</form>

应用程序/路线/膳食/视图.js

import Ember from 'ember';
export default Ember.Route.extend({
  beforeModel(controller) {
    if (!this.get('isLocked')) {
      controller.send('toggleLock');
    }
  },
  model(params, controller) {
    if (!this.get('isLocked')) {
      console.log('attempting to lock due to transition');
      controller.send('toggleLock');
    }
    return this.modelFor('meals').findBy('id', parseInt(params.meal_id));
  },
  isLocked: false,
  lockForm: function() {
    if (this.get('isLocked')) {
      Ember.$('.edit-form').find('input').prop('disabled', true);
      Ember.$('#toggle-lock').text('Unlock');
    } else {
      Ember.$('.edit-form').find('input').prop('disabled', false);
      Ember.$('#toggle-lock').text('Lock');
    }
  }.observes('isLocked'),
  actions: {
    toggleLock: function() {
      if (this.get('isLocked')) {
        console.log('unlocking');
        this.set('isLocked', false);
      } else {
        console.log('locking');
        this.set('isLocked', true);
      }
    }
  }
});

区块报价

你可以用一种更简单的方法来解决这个问题，以下是你可以遵循的步骤：

  1. 如果希望表单开始锁定，则必须设置isLocked:true
  2. 删除lockForm功能

  3. 将disable属性添加到您的输入中。这将根据"已锁定"启用或禁用您的输入。

  4. {{input type="text" class="form-control" id="" placeholder="" value=model.name disabled=isLocked}}

  5. 从model和beforeModel函数中删除controller.send('toggleLock');是不必要的，因为您将isLocked设置为真正的

  6. 添加resetController挂钩以处理同一路由内的转换

    resetController: function(controller){
  controller.set('isLocked', true);
}

下面是一个运行示例https://ember-twiddle.com/fd75547e27faf867ce0daeb9eb65db14?openFiles=controllers.application.js%2C

您可以使用jQuery的强大功能。使用jQuery，您可以在一行中禁用页面（或页面的一部分）中的所有输入字段：

$("input").prop("disabled", true);

如果你有文本区域，你也必须为它们放一行：

$("textarea").prop("disabled", true);

如果有一些字段每次都会被禁用怎么办：

如果你有一些已经被禁用的输入，你应该将它们的原始值存储为一个属性（就在将每个输入的状态设置为禁用之前）：

$('input:disabled').attr('prev_disabled',true);

这样你就可以在切换两次后（刚刚将每个输入的状态设置为启用后）恢复它们：

$('input[prev_disabled]').prop('disabled',true);

如何将jQuery与Ember.js一起使用：

你可以在你的操作、组件生命周期、Ember运行循环等中使用它。（网上有很多例子，比如这个博客）

动作中的示例用法：

actions: {
    lockRequested: function() {
        this.$('input:disabled').attr('prev_disabled',true);
        this.$("input").prop("disabled", true);
    },
    unlockRequested: function() {
        this.$("input").prop("disabled", false);
        this.$('input[prev_disabled]').prop('disabled',true);
    }
}

如果您想在进入页面后立即锁定输入，请使用组件生命周期（例如didRender、didInsertElement或成员运行循环）

相关文章：