1

私はノックアウトで遊んでいて、ここにいる人々とドキュメントの助けを借りて、必要なものを達成する方法を手に入れましたが、まだ問題があり、対処方法がわかりません.

基本的に、ユーザーが従業員のリストをクリックすると、パネルを上にスライドさせようとしています。パネルには、ユーザーが編集して保存または拒否できる詳細があります。

以前の投稿で、viewmodel 内のオブザーバブルへのバインディングをパネルに作成し、オブザーバブルが変更されたときに呼び出されるカスタム バインディングを作成するようにアドバイスされました。私のコードは以下です

ko.bindingHandlers.EmployeePanel = {
    currentEmployee:null,
    SelectEmployee:function(element, value){
        if(value === ko.bindingHandlers.EmployeePanel.currentEmployee){
            return;
        }

        ko.bindingHandlers.EmployeePanel.currentEmployee = value;

        var $PanelWrapper = $(element); 
        var $Bottom = parseInt($PanelWrapper.css("bottom"));

        if($Bottom === 0){
            $PanelWrapper.animate({
                bottom:"-95"
            }, 500).animate({
                bottom:"0"
            }, 500);
        }else{
            $PanelWrapper.animate({
                bottom:"0px"
            }, 500);       
        }
    },

    update:function(element, valueAccessor){
        var value = ko.unwrap(valueAccessor());

        if(value == null){
            return;
        }

        ko.bindingHandlers.EmployeePanel.SelectEmployee(element, value);
    }
}

そして、これが私のバインディングです

<div id="PanelWrapper" data-bind="EmployeePanel: Editable">
        <div id="Pagination">
            Prev | Next
        </div>
        <div data-bind="with: Editable" id="EmployeeDetails">
            <div >
               <label>Name</label><input data-bind="value: Name" />   
               <label>Position</label><input data-bind="value: Position" /> 
               <label>Age</label><input data-bind="value: Age" class="SmallTextField"/>
               <label>Status</label><input data-bind="value: MaritalStatus" />
               <button data-bind="click: $parent.Accept">Save</button>
               <button data-bind="click: $parent.Reject">Cancel</button>     
            </div>   
        </div>
    </div>

今私の問題は、オブザーバブルがnullの場合でも、ページが読み込まれると自動的にスライドアップすることです。これに対抗するためにチェックインしましたが、オブザーバブルが無効になったときにパネルが下にスライドしなくなりました。どうすればこの状況に対処できますか?

if(value == null){
            return;
        }

ここに私のフィドルへのリンクがあります

4

1 に答える 1

0

value == null チェックの前にパネルを非表示にするコードを更新に移動してから、SelectEmployee メソッドでパネルの再表示を処理できます。

ko.bindingHandlers.EmployeePanel = {
    currentEmployee:null,
    SelectEmployee:function(element, value){
        if(value === ko.bindingHandlers.EmployeePanel.currentEmployee){
            return;
        }

        ko.bindingHandlers.EmployeePanel.currentEmployee = value;

        var $PanelWrapper = $(element); 
        var $Bottom = parseInt($PanelWrapper.css("bottom"));

        if($Bottom === 0){
            $PanelWrapper.animate({
                bottom:"0"
            }, 500);
        }else{
            $PanelWrapper.animate({
                bottom:"0px"
            }, 500);       
        }
    },

    update:function(element, valueAccessor){
        var value = ko.unwrap(valueAccessor());

        var $PanelWrapper = $(element);
        $PanelWrapper.animate({
                bottom:"-95"
        }, 500);

        if(value == null)
            return;

        ko.bindingHandlers.EmployeePanel.SelectEmployee(element, value);
    }
}
于 2013-07-30T13:17:28.667 に答える