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观测值来确保新数据反映在UI中。如果要导航到VM，则在创建VM时，需要将参数传递给VM，其中可以包含可观察的对象。在这种情况下，当可观察性更新时，无论从何处来，都会反映在您的VM中。

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

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

2 个答案: