Knockout.js 选择列表在 ios 上运行不稳定

问题描述

我有几个选择框在 ios 中运行不正常.我正在运行cordova 1.8.1，并且在我的页面上运行了一个knockout.js 应用程序.当我在项目选择器中选择一个项目时，它会被选中，但列表中的所有其他项目也会被选中.现在，据我所知，当我提交表单时，正在选择和报告正确的项目，但对用户来说看起来真的很糟糕，可能会非常混乱.我正在做任何花哨的事情，这是代码:

I have a few select boxes that are acting erratically in ios. I'm running cordova 1.8.1 and have a knockout.js application running on my page. When I select an item in the item picker, it gets selected but so do all the other items on the list. Now, as far as I can tell the proper item is being selected and reported when I submit the form, but it looks really really bad to the user and could be very confusing. I'm doing anything fancy, here is the code:

<select class="dropdownList1" style='width:35%;left:28%;position:absolute;' data-bind="value:ContactUsForm.Month,options:ContactUsForm.Months,optionsCaption: 'Month'"></select>

但是当我为这个月选择 7 时，结果如下:

But here is the result when I pick 7 for the month:

这不是多选框.在我看来，这里的错误是在 iOS 中，但我怀疑当我选择一个值时，Knockout 也在做一些重新渲染.在普通浏览器中，框会突然关闭，因此您永远不会看到中间"状态，但在 ios 中，框会保持打开状态，直到您单击完成".

This is NOT a muti select box. It seems to me that the error here is in iOS, but my suspicion is that Knockout is also doing some re rendering when I select a value. In normal browsers the box snaps shut so you never see an 'intermediate' state, but with ios, the box stays open until you click 'done'.

推荐答案

当 Knockout 更新下拉列表中的项目时会导致此问题.但即使 ContactUsForm.Months 永远不会改变，Knockout 仍会在值发生变化时更新项目，例如当您选择一个项目时.请参阅 RP Niemeyer 的文章 Knockout.js Performance Gotcha #3 - All Bindings Fire Together 有关此问题的更多详细信息.

This problem is caused when Knockout updates the items in the drop-down. But even if ContactUsForm.Months never changes, Knockout still updates the items whenever the value changes, such as when you select an item. See RP Niemeyer's article Knockout.js Performance Gotcha #3 - All Bindings Fire Together for more details on this problem.

我认为他在那里提出的解决方案对您有用.您应该使用他的 isolatedOptions 绑定，而不是使用 options 绑定.(另外，value 绑定应该总是在 options 或 isolatedOptions 之后.)

I think a solution he presents there will work for you. Instead of using the options binding, you should use his isolatedOptions binding. (Also the value binding should always be after options or isolatedOptions.)

<select data-bind="
    isolatedOptions:ContactUsForm.Months, optionsCaption:'Month',
    value:ContactUsForm.Month"></select>

这篇关于Knockout.js 选择列表在 ios 上运行不稳定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！