当viewmodel中的值更改时，下拉列表不会更新视图

时间：2013-04-30 12:30:05

标签： jquery jquery-ui knockout.js breeze wijmo

我认为我有以下内容：

 <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然后在我的viewmodel中调用此函数

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字段以外的所有字段。如果我检查viewmodel，则在viewmodel中更改Physical State值，但视图不会更新select中的值。如果我点击保存按钮，PhysicalState字段将以适当的值保存。

我使用以下内容：

  • wijmo professional 2013.v1.2
  • 迪朗达尔
  • 微风
  • jquery 1.90.1
  • jqueryui 1.10.2
  • knockout 2.2.1

3 个答案:

答案 0 :(得分：1)

您遇到的问题是因为wijmo组合框隐藏了选择并呈现了自己的html。设置下拉值的支持方法是使用插件的选项方法，如下所示：

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

为了使这个工作无缝地使用knockout，你需要创建一个自定义绑定并使用它来管理插件。

以下是您可以使用的绑定的简单示例：

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

答案 1 :(得分：0)

我不明白为什么它不起作用但我认为如果你使用knockout为select html元素实现的特殊绑定会更好。

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

我希望这可以帮助您解决问题。

---编辑 -

我更改了链接，我写错了链接。

答案 2 :(得分：0)

如果下拉列表的样式是隐藏它，我发现淘汰赛不会从他们的来电中更新。

以选择为例：

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

通过触发所选更改的原始字段更改，我能够获得更新的淘汰值。我从来没有使用过Wijmo，但它似乎在做类似于造型的事情，所以更有可能的是它不会像淘汰赛期望的那样触发下拉。

编辑重新阅读你的问题我发现你问我的答案正好相反。假设你有一个明确的复制事件，你可以触发一个wijmo更新（再次只选择了经验，但我认为他们有类似的东西：

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

这说明选择已更改，您需要更新。

相关问题
最新问题