首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Knockout JS:在"select“标记中显示不正确的值

Knockout JS:在"select“标记中显示不正确的值
EN

Stack Overflow用户
提问于 2012-06-30 10:30:28
回答 1查看 406关注 0票数 1

视图模型:

代码语言:javascript
运行
复制
function Specialization(id, name) {
            var self = this;
            self.id = id;
            self.name = name;
        }

        function ObservableSpecialization() {
            var self = this;
            self.availableItem = ko.observable();
        }

        function ViewModel() {
            var self = this;
            self.specializations = ko.observableArray([]);
            self.availableSpecializations = [];

            self.addSpecialization = function () {
                self.specializations.push(new Specialization());
            }
            self.removeSpecialization = function (specialization) {
                self.specializations.remove(specialization)
            }
        }

文档加载:

代码语言:javascript
运行
复制
$(document).ready(function () {
            var model = new ViewModel();

            var temp = [];
            $.each(window.availableSpecializations, function (i, item) {
                var specialization = new Specialization(item.ID, item.Name);
                model.availableSpecializations.push(specialization);
                temp.push(item.ID);
            });
            $.each(window.userSpecializations, function (i, item) {

                var idx = temp.indexOf(item.ID);
                if (idx != -1) {
                    var available = model.availableSpecializations[idx];
                    var specialization = new ObservableSpecialization();
                    specialization.availableItem = available;
                    model.specializations.push(specialization);
                }
            });

            ko.applyBindings(model);
        });

<select>代码片段:

代码语言:javascript
运行
复制
<tbody data-bind="foreach: specializations">
                        <tr>
                            <td>
                                <select name="Specializations" data-bind="options: $root.availableSpecializations, value: 'availableItem', optionsText: 'name'">
                                </select>
                            </td>

结果:

正如您在下面看到的,所有值始终设置为列表中的第一项。我猜ID不知何故没有绑定到所选项目...我哪里错了?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-06-30 11:40:30

有两个问题:首先,specialization.availableItem是一个可观察的对象,因此应该分配一个函数调用:specialization.availableItem(available)

其次,在绑定字符串中有value: 'availableItem',它只是将select值设置为字符串'availableItem‘。应该不带引号:value: availableItem

这里有两个补丁:jsfiddle

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11270970

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档