在持久性烬之后更新dom

update dom after persistence emberjs

本文关键字：更新 dom 之后 持久性      更新时间：2023-09-26

至少目前我不使用ember-data。我想知道如何在我创建一个新记录后更新DOM ?例如，我添加了一个新公司。以下是我工作的简化版本。

因为我不使用ember数据，这是我的适配器:

export default Ember.Object.extend({
    findAll: function(){
        return ajax('http://localhost:8000/api/v1/companies?includes=detail')
            .then(function(response){
                return response.data.map(function(c){
                    return {
                        name: c.name,
                        slug: c.slug,
                        address: c.detail.data.address,
                        city: c.detail.data.city,
                        state: c.detail.data.state,
                        country: c.detail.data.country,
                        zip_code: c.detail.data.zip_code,
                        unformatted_phone: c.detail.data.unformatted_phone_number,
                        formatted_phone: c.detail.data.formatted_phone_number,
                        email: c.detail.data.email,
                        showDetails: false
                    }
                });
            });
    }
});

添加和检索公司来自两个不同的路径。为了添加一个模态组件，它与检索数据不同。

export default Ember.Controller.extend({
    clearProperties: function(){
        this.setProperties({
            username: "",
            email: "",
            password: ""
        });
    },
    actions:{
        addCompany: function(){
            var self = this;
            var data = self.getProperties('all my properties');
            $.post('http://localhost:8000/api/v1/company/add-company', data).then(function(response){
                console.log(response);
            });
            self.clearProperties();
        }
    }
});

是否有一个函数，我可以运行，以某种方式刷新DOM?所以ember向服务器发出一个新请求并更新DOM?或者我可以手动向模型添加一条记录吗?ember会自动捕获它吗?

我尝试在ajax调用后这样做:

this.get('model').push({
                name: data.name,
                address: data.address,
                city: data.city,
                state: data.state
            });

。

所以这里的问题是您正在处理POJO，而您应该在Ember.Object中处理。如果您更新了POJO，手柄无法识别此更改。如果你更新一个叫做object的Ember.Object，并且你在车把模板中将其显示为{{object.someProp}}，那么更新someProp将导致渲染，因为Ember.Object扩展了Observable mixin并且实现了双向绑定。

另外，当你添加项目到Ember.A，即Ember.Array，使用pushObject而不是push，以触发update。我也不使用Ember数据，但出于这个原因，我的所有服务都返回Ember.Object或Ember.Object的数组。

在models/company.js中创建一个名为company的模型对象:

import Ember from 'ember';
export default Ember.Object.extend({
    name: null,
    slug: null,
    //... all other properties
});

，在findAll方法中:

import Company from 'app_name/models/company';
export default Ember.Object.extend({
    findAll: function(){
        return ajax('http://localhost:8000/api/v1/companies?includes=detail')
            .then(function(response){
                return response.data.map(function(c){
                    return Company.create({
                        name: c.name,
                        slug: c.slug,
                        address: c.detail.data.address,
                        city: c.detail.data.city,
                        state: c.detail.data.state,
                        country: c.detail.data.country,
                        zip_code: c.detail.data.zip_code,
                        unformatted_phone: c.detail.data.unformatted_phone_number,
                        formatted_phone: c.detail.data.formatted_phone_number,
                        email: c.detail.data.email,
                        showDetails: false
                    });
                });
            });
    }
});

你可以将模型重新分配给findAll的新调用，或者:

this.get('model').pushObject(Company.create({
    name: data.name,
    address: data.address,
    city: data.city,
    state: data.state
}));
相关文章：