UI 未检测到可观察数组答案

【问题标题】：UI not detecting observable arrayUI 未检测到可观察数组
【发布时间】：2017-09-08 02:59:41
【问题描述】：

大家好，我对 KO Observable 数组和我的 UI 有一个奇怪的问题，如果我将一个固定模型传递给我的 observable 数组，这个可以工作！并正确显示选择选项，但是如果动态地使这个选项根本不显示任何东西，我已经使第一个选择选项动态工作并且它工作完美！但第二个选项根本不起作用。

这是我的模型的选项代码

var TipoModel = function(data) {
   var self = this;
   self.id = ko.observable(data.id);
   self.name = ko.observable(data.name);
};

var HabitacionModel = function(Huespedes) {
...
self.loadRoomsType = function() {
    ajax("/api/foro/loadrooms", {}, function(data) {

        self.tipoHabitacion = ko.observableArray([]);
        $.each(data, function(index, habitacion) {
            var hab = new TipoModel({
                id: habitacion.id,
                name: habitacion.nombreHabitacion
            });
            self.tipoHabitacion.push(hab);
        });
    }, "GET");
    console.log(self.tipoHabitacion());
}
self.loadpartnersType = function() {
    ajax("/api/foro/loadpartners", {}, function(data) {
        var self = this;
        self.tipoHuesped = ko.observableArray([]);
        $.each(data, function(index, socio) {

            var x = new TipoModel({
                id: socio.id,
                name: socio.nombre
            });

            self.tipoHuesped.push(x);
        });
        console.log(self.tipoHuesped());

    }, "GET");
}

装载室工作，但合作伙伴功能不工作，是相同的代码，只有一些变化，但它是相同的。

<select style="width:30%; height:100%; margin-top:4px; background-color:transparent; border-color:#729A2B;" data-bind="options: tipoHuesped,
                        value: selectedHuesped,
                        optionsText: 'name', 
                        optionsValue: 'id',
                       optionsCaption: 'Escoge...'" required></select>

如果我从一开始就这样定义可观察数组，它就可以工作

self.tipoHuesped = ko.observableArray([
    new TipoModel({
        id: "1",
        name: "Aeroméxico"
    }),
    new TipoModel({
        id: "2",
        name: "Magnicharters"
    })
]);

我想动态地进行此操作，因为很快会添加更多数据，希望你们能帮助我。谢谢

【问题讨论】：

"self.tipoHabitacion = ko.observableArray([]);"不应在 ajax 回调中 - 您创建 observableArray 的新实例，但标记已绑定到前一个。
同样的事情是“self.tipoHuesped = ko.observableArray([]);”

标签： javascript jquery arrays knockout.js

【解决方案1】：

"self.tipoHabitacion = ko.observableArray([]);"不应在 ajax 回调中 - 您创建 observableArray 的新实例，但标记已绑定到前一个。

因此，您应该一次创建可观察对象，然后向其中添加或删除项目：

var TipoModel = function(data) {
   var self = this;
   self.id = ko.observable(data.id);
   self.name = ko.observable(data.name);
};

var HabitacionModel = function(Huespedes) {
...
self.tipoHabitacion = ko.observableArray([]);
self.tipoHuesped = ko.observableArray([]);
self.loadRoomsType = function() {
    ajax("/api/foro/loadrooms", {}, function(data) {

        self.tipoHabitacion.removeAll();
        $.each(data, function(index, habitacion) {
            var hab = new TipoModel({
                id: habitacion.id,
                name: habitacion.nombreHabitacion
            });
            self.tipoHabitacion.push(hab);
        });
    }, "GET");
    console.log(self.tipoHabitacion());
}
self.loadpartnersType = function() {
    ajax("/api/foro/loadpartners", {}, function(data) {
        var self = this;
        self.tipoHuesped.removeAll();
        $.each(data, function(index, socio) {

            var x = new TipoModel({
                id: socio.id,
                name: socio.nombre
            });

            self.tipoHuesped.push(x);
        });
        console.log(self.tipoHuesped());

    }, "GET");
}

【讨论】：

我已经实现了这段代码，但它给了我一个错误，即无法读取未定义的属性 'push'，我为 observables 数组实现了 var self，我做错了吗？
已经工作了，只在 observable 中添加一个括号，但发生了一些奇怪的事情，self.tipoHabitacion().push(hab);工作完美，但 self.tipoHuesped().push(x);返回元素未找到的错误，即使这个元素已在主对象中初始化
“Cannot read property 'push' of undefined”消息意味着此时未创建可观察数组 - 您的函数在数组初始化之前被调用。
self.tipoHabitacion().push(hab); - 不好，因为因此您修改了存储的数组，而不是可观察的集合。这导致订阅者不会收到有关集合更改的通知。
如果你可以创建jsfiddle或者SO代码sn-p，我可以检查一下

【解决方案2】：

我已经意识到它的全部内容，没有意识到代码是在对象中分离的，所以我试图将这段代码附加到错误的对象上！

我m getting started with ko so didnt 意识到这一切！向所有人道歉！

【讨论】：