2012-02-08 6 views
0

データベースからいくつかのドロップダウンオプションを使用してビューモデルを入力しようとしています。私は選択されたオブジェクトを追跡したいのですが、それは私がカスタムバインドで他の場所で使用しているプロパティを持っているからです。Knockout.JS Observable ArrayをDropDownListにバインドされたAJAXを経由して

私は観測値を「空白」値で初期化して、バインディングが発生してカスタムバインディングが機能するときに正しく設定されるようにします。サーバーが応答すると、観測可能な配列にデータをモーフィングし、ドロップダウンリストにオプションを表示します。ここで

は、JavaScriptコードである:ここで

ko.bindingHandlers.jq_fade = { 
    init: function (element, valueAccessor) { 
     // Initially set the element to be instantly visible/hidden depending on the value 
     var value = valueAccessor(); 
     $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable 
    }, 
    update: function (element, valueAccessor) { 
     // Whenever the value subsequently changes, slowly fade the element in or out 
     var value = valueAccessor(); 
     ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut(); 
    } 
}; 

function Firm(id, name, outsideCounsel) { 
    this.name = name; 
    this.id = id; 
    this.outsideCounsel = outsideCounsel; 
} 

function RequestViewModel() { 
    var self = this, 
     ONE_DAY = 1000 * 60 * 60 * 24; 


    self.firm = ko.observable(new Firm(-1, "", false)); 

    $.post(ajaxAddress + 'LoadFirms', function (data) { 
     var mappedFirms = $.map(data.d, function (item) { 
      return new Firm(item.OrganizationLookupID, item.OrganizationLookupName, item.IsExternalCounselFirm); 
     }); 
     self.availableFirms(mappedFirms); 
     self.firm(self.availableFirms()[0]); 
    }); 
} 


$(document).ready(function() { 
    model = new RequestViewModel(); 
    ko.applyBindings(model); 
}); 

は、関連するHTMLが

ある
<span data-bind="jq_fade: firm().outsideCounsel"> 
    Outside Counsel 
    <input type="text" id="outsideCounsel" data-bind="value: outsideCounsel" /> 
</span> 

私が選択した企業は外部の弁護士である場合にのみDIVを表示するようにすることを望みます。行data-bind="jq_fade: firm().outsideCounselを削除すると、すべて正常に動作します。私が$.post()の呼び出しを同期させると、それは動作します。 initの機能がjq_fadeに間違っていると思っています。

私が受け取るエラーは、次のとおりです。

Uncaught Error: Unable to parse bindings. Message: TypeError: Cannot call method 'outsideCounsel' of undefined; Bindings value: jq_fade: firm().outsideCounsel()

私はノックアウトが私に言っているか理解し、私はちょうど私が初期値を設定するためfirm()が今までundefinedことができるかどうかはわかりません。

+0

かどうかを見るには、サーバーが任意のデータを返しますか?そうでなければ、この行はself.firm(self.availableFirms()[0]); self.firmをundefinedにリセットする可能性があります –

+0

最後のパラメータとして$ .postに "json"を指定する必要があるかもしれません。 –

+0

はいサーバーがデータを返すと確信しています。あなたは "json"を指定することが正しい。私は '$ .ajaxSetup()'コールを使って、ページのそれをさらに進めています。 – arb

答えて

1

あなたがドロップダウンリストにavailableFirms()を結合している場合、私は別のリストから選択されたときに、firm()が自動的に更新されると、すべてのバインディングが自動的に更新されるように、あなたが同じリストにfirm()をも拘束しましたと仮定しています。

この場合、firm()はドロップダウンリストの最初の要素に設定されるため、設定する必要はありません。

ここで例3を参照してください。

http://knockoutjs.com/documentation/options-binding.html

var viewModel = { 
    availableCountries : ko.observableArray([ 
     new country("UK", 65000000), 
     new country("USA", 320000000), 
     new country("Sweden", 29000000) 
    ]), 
    selectedCountry : ko.observable() // Nothing selected by default 
}; 

特にfirm()を設定することなく、上記のようにそれを試してみて、再び、それはエラー