Question

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

以下是我的选项模型的代码

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"
    })
]);

我想动态地做这个，因为很快就会添加更多的数据，希望你能帮助我们。感谢

Answer 1

＆＃34; self.tipoHabitacion = ko.observableArray（[]）;＆＃34;不应该在ajax回调中 - 你创建了一个observableArray的新实例，但是标记与前一个实例绑定。

因此，您应该一次创建一次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.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");
}

Answer 2

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

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

UI未检测到可观察数组

2 个答案: