jquery - ビューモデルの値が変更されたときにドロップダウンがビューを更新しない

Question

私は次のように考えています。

 <div id="tbAddress" class="row">
    <div class="span12">
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span11">
                <h2>Mailing Address</h2>
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Address</div>
            <div class="span9">
                <input type="text" data-bind="value: MailingAddress1 " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Address 2</div>
            <div class="span9">
                <input type="text" data-bind="value: MailingAddress2 " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">City</div>
            <div class="span9">
                <input type="text" data-bind="value: MailingCity " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">State</div>
            <div class="span3">
                 <select data-bind="value: MailingState">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">Dist of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>
            <div class="span1">&nbsp;</div>
            <div class="span2">Zip Code</div>
            <div class="span3">
                <input type="text" data-bind="value: MailingZIP " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Phone</div>
            <div class="span3">
                <input type="text" data-bind="value: Phone " />
            </div>
            <div class="span1">&nbsp;</div>
            <div class="span2">Fax</div>
            <div class="span3">
                <input type="text" data-bind="value: Fax " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Email</div>
            <div class="span9">
                <input type="text" data-bind="value: Email " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Website</div>
            <div class="span9">
                <input type="text" data-bind="value: Website " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span7">
                <h2>Physical Address</h2>
            </div>
            <div class="span4">
                <button type="submit" data-bind="click: $parent.sameAsMailingAddressClicked">Physical Address Same as Mailing</button>
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Address</div>
            <div class="span9">
                <input type="text" data-bind="value: PhysicalAddress1 " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">Address 2</div>
            <div class="span9">
                <input type="text" data-bind="value: PhysicalAddress2 " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">City</div>
            <div class="span9">
                <input type="text" data-bind="value: PhysicalCity " />
            </div>
        </div>
        <div class="row">
            <div class="span1">&nbsp;</div>
            <div class="span2">State</div>
            <div class="span3">
                <select data-bind="value: PhysicalState">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">Dist of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>
            <div class="span1">&nbsp;</div>
            <div class="span2">Zip Code</div>
            <div class="span3">
                <input type="text" data-bind="value: PhysicalZIP " />
            </div>
        </div>
    </div>
</div>

ボタン Same As Mailing は、ビューモデルでこの関数を呼び出します

function doSameMailing(){

    var ap = self.activePermit();

    ap.PhysicalAddress1(ap.MailingAddress1());
    ap.PhysicalAddress2(ap.MailingAddress2());
    ap.PhysicalCity(ap.MailingCity());
    ap.PhysicalState(ap.MailingState());
    ap.PhysicalZIP(ap.MailingZIP());

}

viewAttached ハンドラーには、入力と select ステートメントで wijmo コントロールを利用する次のコードがあります。

 $('select').wijcombobox();
 $(':text').wijtextbox();

郵送先住所を物理住所フィールドにコピーしたいのですが、これはPhysicalStateフィールド以外のすべてで機能します。ビューモデルをチェックすると、ビューモデルで物理状態の値が変更されますが、ビューは選択の値を更新しません。保存ボタンを押すと、PhysicalState フィールドが適切な値で保存されます。

私は以下を使用しています：

wijmo プロフェッショナル 2013.v1.2
デュランダル
風
jquery 1.90.1
jqueryui 1.10.2
ノックアウト 2.2.1

score 1 · Accepted Answer

あなたが直面している問題は、wijmo コンボボックスが選択を非表示にし、独自の html をレンダリングするためです。ドロップダウン値を設定するサポートされている方法は、次のようにプラグインのオプションメソッドを使用することです。

$("#physicalStatesSelect").wijcombobox("option", "selectedValue", "TN")

これをノックアウトを使用してシームレスに機能させるには、カスタムバインディングを作成し、それを使用してプラグインを管理する必要があります。

使用できるバインディングの簡単な例を次に示します。

ko.bindingHandlers.wijmocombobox = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        //create the element
        $(element).wijcombobox();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        //update logic
        var selectedValue = ko.utils.unwrapObservable(valueAccessor());
        $(element).wijcombobox("option", "selectedValue", selectedValue)
    }
};

そのバインディングを使用すると、html は次のようになります。

<select data-bind="wijmocombobox: PhysicalState">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    ...
</select>

wijcomboboxが init で作成されていることに注意してください。そのため、現在の呼び出しを削除する必要があります。$('select').wijcombobox();

PhysicalState ビューモデルプロパティをコントロールから更新するには、バインディングの「init」メソッド内にイベントハンドラーを設定する必要がある場合があります。このハンドラーは、要素の変更をリッスンし、wijmocombobox からの selectedValue を使用して PhysicalState 値を手動で設定できます。何かのようなもの：

var selectedValueObservable = valueAccessor();
var newValue = $(element).wijcombobox("option", "selectedValue");
selectedValueObservable(newValue);

score 0 · Accepted Answer

なぜ機能しないのかわかりませんが、select html 要素に対してノックアウトによって実装された特別なバインドを使用する方が良いと思います。

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

これが問題の解決に役立つことを願っています。

- -編集 -

リンクを変更しました。間違ったリンクを書きました。

score 0 · Accepted Answer

ドロップダウンが非表示になっているという意味でスタイル設定されている場合、呼び出しからノックアウトが更新されないことがわかりました。

たとえば、次のように選択します。

$('#field').chosen().change(function(){
  $('#field').change();
});

選択した変更で元のフィールドの変更をトリガーすることで、ノックアウト値を更新することができました。私は Wijmo を使用したことはありませんが、スタイリングに似たようなことをしているように見えるため、ノックアウトが期待する方法でドロップダウンをトリガーしていない可能性が高くなります。

編集あなたの質問を読み直して、あなたが私の答えの反対を求めていたことに気づきました。明示的なコピーイベントがあると仮定すると、wijmo の更新をトリガーできます (ここでも経験を選択しただけですが、似たようなものがあると思います:

//On update
$('#field').trigger('liszt:update');

これは、select が変更され、更新する必要があることを selected に伝えます。

jquery - ビューモデルの値が変更されたときにドロップダウンがビューを更新しない

3 に答える 3

Related

Reference