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

Question

我正在开发一个 CRUD 应用程序，我从显示 table 数据的页面导航到某些表单以添加或编辑这些数据。我想，例如，当我添加一些数据并导航到 table 页面以显示添加的新行时。

我现在使用的是一个刷新按钮，可以再次获取数据并将其插入到可观察数组中。

点击提交时我如何导航到选项卡：

   $.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

一般来说，您可以使用 ko observables 来确保新数据反映在 UI 中。如果您导航到 VM，在创建 VM 时，您会向它传递参数，其中可以包含可观察值。在这种情况下，当 observable 更新时，无论从哪里，都会反映在您的 VM 中。

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

Answer 2

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

将其放入具有 table 数据的 ViewModel 中：

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

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

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

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

How to re-run the ViewModel when you navigate between tabs in Oracle JET?

rest

router

oracle-jet

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

How to re-run the ViewModel when you navigate between tabs in Oracle JET?

rest

router

oracle-jet

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