Javascript knockoutjs单选按钮选中值,带有protectedobservable
谢谢你调查这件事 我构建了以下示例: 这是一个菜单列表生成器。添加菜单时,会弹出一个编辑表单。使用protectedObservable,以便我可以提交或重置(根据代码)。我遇到问题的一个功能是,有一个单选按钮列表(用于TypeId),根据值(10=Url,20=Category,30=Page),您可以设置相应的属性(10=Url,20=CategoryId,30=PageId) 通过单选按钮,如果选择了Url,则应显示另一个文本框(基于urlVisible),以便用户输入Url。我添加了一个带有文本的span:TypeId.temp,以便可以看到临时值。这是非常不规则的。试着轻弹几下 任何帮助都将不胜感激 我的HTMLJavascript knockoutjs单选按钮选中值,带有protectedobservable,javascript,jquery,html,knockout.js,Javascript,Jquery,Html,Knockout.js,谢谢你调查这件事 我构建了以下示例: 这是一个菜单列表生成器。添加菜单时,会弹出一个编辑表单。使用protectedObservable,以便我可以提交或重置(根据代码)。我遇到问题的一个功能是,有一个单选按钮列表(用于TypeId),根据值(10=Url,20=Category,30=Page),您可以设置相应的属性(10=Url,20=CategoryId,30=PageId) 通过单选按钮,如果选择了Url,则应显示另一个文本框(基于urlVisible),以便用户输入Url。我添加了一个
<a class="btn btn-primary" data-bind="click: addMenu">Add Menu</a>
<ul data-bind="foreach: Menus">
<li><a href="#" data-bind="text: Name, click: editMenu"></a></li>
</ul>
<div class="panel panel-default" data-bind="slideIn: editMenuItem, with: editMenuItem">
<div class="panel-body">
<div class="form-group">
<label for="MenuName">Name: </label>
<input type="text" id="MenuName" data-bind="value: Name" class="form-control" />
</div>
<label class="radio-inline">
<input type="radio" name="MenuTypeId" value="10" data-bind="checked: TypeId" /> Url
</label>
<label class="radio-inline">
<input type="radio" name="MenuTypeId" value="20" data-bind="checked: TypeId" /> Category
</label>
<label class="radio-inline">
<input type="radio" name="MenuTypeId" value="30" data-bind="checked: TypeId" /> Page
</label>
<div class="form-group" data-bind="visible: urlVisible">
<label for="MenuUrl">Url: </label>
<input type="text" id="MenuUrl" data-bind="value: Url" class="form-control" />
</div>
<br />
<p>TypeId.temp = <span data-bind="text: TypeId.temp"></span></p>
<br /><br />
<input type="button" class="btn btn-success" value="Update" data-bind="click: commit" /> or
<a href="#" data-bind="click: reset">Cancel</a>
</div>
</div>
如果将单选按钮绑定更改为
<input type="radio" name="MenuTypeId" value="10" data-bind="checked: TypeId.temp" />
临时id将相应更改,单选按钮行为一致,但与TypeId值不一致
此外,protectedObservable绑定单选按钮值的效果也不好
当您手动单击单选按钮时,TypeId值永远不会更改(因为您没有提交该值),我猜由于单选按钮值从10开始从未更改,因此无法识别随后手动单击Url单选按钮
我用一个按钮更新了值,它也相应地改变了;但随后单击单选按钮时,它不会从该TypeId移动值
对于protectedObservable绑定,这个问题仍然存在,但对于一个简单的observable绑定,这个问题并没有出现
进一步探讨这个想法的代码:实际上就是这样做的。在提交之前,TypeId值不需要更改。但由于我存储了所有3个值(CategoryId、PageId和Url),这取决于提交的TypeId,因此我可以使用任何值。我明白你在说什么-但由于我还没有调查的原因,我的应用程序上没有出现这个bug。我将尝试发布另一个带有更新解决方案的JSFIDLE。
<input type="radio" name="MenuTypeId" value="10" data-bind="checked: TypeId.temp" />