Ember：ハードコードなしでページを読み込んでフォームをロックする "無効"

Question

複数のフォームをいくつか用意しています。私の上司は、フォームを無効にし、ロック/アンロックボタンを持つ方法を見つけるように私に求めました。したがって、ユーザーはフォームに移動し、ロックを解除して変更を加え、フォームをロックまたは保存します。主な問題は、すべての入力（おそらく数百）に "disabled = true"をハードコーディングせずにこれを行う方法を見つけることです。

私は道の90％です。私はtoggleLockアクションを働かせています。同じルート内で別のモデルに移行しても、フォームはロックされます。問題は、ページが最初にロードされたとき、またはページがリフレッシュされたときにフォームがロックされないことです。

ここでは、コードです：https://github.com/djbreen7/ember-sandbox

アプリ/テンプレート/食事/ 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> 

アプリ/路線/食事/ view.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); 
     } 
    } 
    } 
}); 

：利用可能な

Answer 1

ブロッククォーテーション

あなたはこれに簡単な方法を解決することができ、これらはあなたが従うことができます手順は次のとおりです。

1. あなたは、フォームの開始がロックされていることをしたい場合は、isLocked:true
2. lockForm機能

3. を削除を設定する必要があります入力にdisableプロパティを追加します。これはisLockedに応じて入力を有効または無効にします。

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

5. modelとbeforeModel関数からcontroller.send('toggleLock');を削除し、あなたが同じルート

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

内の遷移を処理するために resetControllerフックを追加し、真

にisLockedをsettedためunnecesaryです

実行中の例https://ember-twiddle.com/fd75547e27faf867ce0daeb9eb65db14?openFiles=controllers.application.js%2C

Answer 2

jQueryのパワーを使うことができます。jQueryのを使用すると、1行にすべての入力ページのフィールド（またはページの一部）を無効にすることができます：あなたはテキストエリアを持っている場合は

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

、あなたはあまりにも彼らのために1行を挿入する必要があります。

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

何いくつかのフィールドがある場合、それらが無効に毎回次のようになります。あなたには、いくつかの入力を持っている場合は

はそれらはすでに無効になっています、あなたは（単に無効にすべての入力の状​​態を設定する前に）属性として元の値を格納する必要があります：

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

あなたは（だけ有効にすべての入力の状​​態を設定した後）二回トグル後にそれらを復元できるように：Ember.jsでのjQueryを使用することが可能であるどのように

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

：

アクション、コンポーネントのライフサイクル、Ember実行ループなどで使用できます（this blogなど、ウェブ上に多数の例があります）

アクションで

使用例：

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またはエバー実行ループ）