持久化 emberjs 后更新 dom

Question

我暂时没有使用 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
            });

不好。

Answer 1

所以这里的问题是您处理的是 POJO，您应该处理的是 Ember.Object 如果您更新 POJO，车把无法识别此更改。如果您更新一个名为 say object 的 Ember.Object 并且您在车把模板中将其显示为 {{object.someProp}}，更新 someProp 将导致重新渲染，因为 Ember.Object 扩展了Observable mixin 和 2-way 绑定实现。

此外，当您向 Ember.A 添加项目时，即 Ember.Array，请使用 pushObject 而不是 push 以触发 update .我也不使用 Ember 数据，但出于这个原因，我所有的服务 return 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
}));

持久化 emberjs 后更新 dom

update dom after persistence emberjs

javascript

ember.js

ember-cli