Ember：在頁面加載時鎖定表單而不用硬編碼「禁用」

我有幾種輸入形式。我的老闆已經要求我找到一種方法來禁用表單並且擁有鎖定/解鎖按鈕。因此，用戶將轉到表單，單擊解鎖進行更改，然後鎖定和/或保存表單。主要的問題是試圖找到如何做到這一點，而不是在所有輸入（可能有幾百個）中「殘疾=真」編碼。Ember：在頁面加載時鎖定表單而不用硬編碼「禁用」

我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); 
     } 
    } 
    } 
});

來源

2016-04-19 D.Breen

Blockquote

就可以解決這個更簡單的方法，這些步驟可以遵循：

如果您希望您的形式開始鎖定必須設置isLocked:true
刪除lockForm功能
添加到您的輸入disable屬性。這將啓用或禁用您的輸入取決於isLocked。
{{input type="text" class="form-control" id="" placeholder="" value=model.name disabled=isLocked}}
從model和beforeModel功能刪除controller.send('toggleLock');，是unnecesary因爲你設置好的isLocked真

添加resetController鉤同一路線

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

內辦理轉換

這是一個運行示例https://ember-twiddle.com/fd75547e27faf867ce0daeb9eb65db14?openFiles=controllers.application.js%2C

來源

2016-04-19 18:53:32

謝謝。恐怕這可能是解決方案。我試圖找到一種方法來做到這一點，而不需要經過數百行代碼來添加'disabled = isLocked'，但我相信它可能是唯一的方法。我會堅持看看是否還有更多答案出現。儘管這是一個很好的解釋。如果我有代表upvote我會的。 –

我能夠得到這個工作，而無需進入和調整所有的形式。我希望我可以分享更多，但我的老闆寫了一個組件。所以基本上這個組件中存在'disabled'屬性。我們希望禁用的任何形式都包含在組件中。然後，遵循你的建議完美的作品，只需要在組件內有'disabled = isLocked'。 –

您可以使用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運行循環等中使用它（網上有很多示例，如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或者餘燼運行循環）

來源

2016-04-19 20:53:22 ykaragol

Ember：在頁面加載時鎖定表單而不用硬編碼「禁用」

回答

相關問題