Блог

Я разрабатываю CRUD-приложение, в котором я перехожу со страницы, отображающей таблицы моих данных, на некоторые формы для добавления или редактирования этих данных. я хочу, например, когда я добавляю некоторые данные и перехожу на страницу таблицы, показать добавленную новую строку.

что я использую сейчас, так это кнопку обновления, которая снова извлекает данные и вставляет их в наблюдаемый массив.

вот как я перехожу на вкладку, когда нажимаю отправить:

    $.ajax({
            url: url  '/customer',
            type: "POST",
            data: JSON.stringify(dataObj),
            contentType: 'application/json',
            success: function (response) {
                console.log(response);

            },
            error: function(error){
                console.log("Something went wrong", error);
            }
        }).then(function () {
            oj.Router.rootInstance.go("customers");
            return true;

        })
  

и это действие обновления, которое я использую сейчас:

   self.customerData = function (){
        tempArray = [];
        $.getJSON(url   "/customer").
        then(function(tasks){

            $.each(tasks, function (){

                tempArray.push({
                    customerId: this._id,
                    name: this.name,
                    address: this.address,
                    email: this.email,
                    phone: this.phone,
                    area: this.area,
                    empNum: this.empNum,
                    sector: this.sector,
                    website: this.website,
                    facebook: this.facebook,
                    linkedin: this.linkedin,
                    activity: this.activity.name,
                    country: this.country.name
                });
            });


            var auxTab =[];
            for (var i =0; i<tempArray.length; i  )
            {
                var obj ={};
                obj.customerId = i;
                obj.name = tempArray[i].name;
                obj.address = tempArray[i].address;
                obj.email= tempArray[i].email;
                obj.phone = tempArray[i].phone;
                obj.area = tempArray[i].area;
                obj.empNum = tempArray[i].empNum;
                obj.website = tempArray[i].website;
                obj.facebook = tempArray[i].facebook;
                obj.linkedin = tempArray[i].linkedin;
                obj.activity = tempArray[i].activity;
                obj.country = tempArray[i].country;

                if (tempArray[i].sector === 'true')
                {
                    obj.sector = 'Public';
                }
                else
                {
                    obj.sector = 'Private';
                }

                auxTab[i] = obj;


            }

            self.customerArray(auxTab);

        });
    };

  self.refreshClick = function(event){
        self.customerData();
        return true;
    }
  

я ожидаю, что строка будет автоматически отображаться при переходе на вкладку customer tab, но этого не происходит.

Почему бы просто не вызвать customerData() метод внутри connected() функции? Эта функция автоматически вызывается (если вы ее определили) из ViewModel при отображении новой HTML-страницы.

Поместите это в свою ViewModel, которая содержит табличные данные:

 self.connected = function(){
    self.customerData();
};
  

Более подробную информацию смотрите в документах.

Примечание: connected Функция используется в версии 6 и более поздних версиях. До этого вызывалась функция bindingsApplied .

В общем, вы можете использовать ko observables, чтобы гарантировать, что новые данные отражены в пользовательском интерфейсе. В случае, если вы переходите к виртуальной машине, при создании виртуальной машины вы должны передать ей параметры, которые могут содержать наблюдаемые. В этом случае, когда observable обновляется, независимо от того, откуда, это отразится на вашей виртуальной машине.

Я вижу, что ваш метод, извлекающий данные клиента, представляет собой простой массив, и я предполагаю, что он привязан к пользовательскому интерфейсу. Вы пытались создать tempArray в виде наблюдаемого массива?