在Oracle JET中的选项卡之间导航时如何重新运行ViewModel？

Question

我正在开发一个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;
    }

我希望当我导航到客户选项卡选项卡时，该行将自动显示，但事实并非如此。

Answer 1

为什么不简单地在customerData()函数中调用connected()方法？在渲染新的html页面时，将自动从viewModel调用此函数（如果已定义）。

将它放在具有表数据的ViewModel中：

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

有关更多详细信息，请参阅docs。

注意：connected函数用于版本6及更高版本。在此之前，该功能被称为bindingsApplied。

Answer 2

通常，您可以使用ko observables来确保新数据反映在UI中。如果您在创建VM时导航到VM，则会将参数传递给它，该参数可以包含observable。在这种情况下，当observable更新时，无论从何处，都会反映在您的VM中。

我看到你的方法获取客户数据是一个简单的数组，我认为它绑定到UI。您是否尝试将tempArray作为可观察数组？