如何在Ember JS中使用多个模型（无Ember Data）？ [英] How do you work with multiple models in Ember JS (without Ember Data)?

问题描述

  App = Ember.Application.create （）; 
 
 App.Router.map（function（）{
 this.resource（'employees'，function（）{
 this.route（'employee'）; 
}）; 
}）; 
 
 App.Employee = Ember.Object.extend（{}）; 
 
 App.Employee.reopenClass（{
 findAll：function（）{
 return $ .getJSON（http：// localhost / api / employee）.then（
 function（response）{
 var employees = []; 
 response.forEach（function（child）{
 employees.push（App.Employee.create（child））; 
}）; 
 console.log（employees.join（'\\\
'））; 
返回员工; 
} 
）; 
} 
}）; 
 
 App.EmployeesController = Ember.ArrayController.extend（{}）; 
 
 App.EmployeesRoute = Ember.Route.extend（{
 model：function（）{
 return App.Employee.findAll（）; 
} 
}）; 
  

Handlebars：

 code>< script type =text / x-handlebars> 
< p>应用程序模板< / p> 
 {{#linkTo employees}}< button>显示员工< / button> {{/ linkTo}} 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =employees> 
< p>员工模板< / p> 
 {{#each controller}} 
< p> {{Name}}< / p> 
 {{/ each}} 
 {{outlet}} 
< / script> 
  

当我浏览到 localhost /＃/ employee url直接，它工作得很好，但当我点击显示员工按钮，我得到以下错误：

  Uncaught TypeError：Object＃< Object>没有方法'addArrayObserver'
  

我可能在某处丢失了一些东西，但我并不确定哪个对象的错误是指那里。当我按下按钮时，我的模型挂钩被正确调用，就像我通过手动输入url一样导航一样，所以我不明白两种情况究竟有什么不同。

解决方案

最后得到这个东西。

我的错误是尝试重新创建（阅读复制粘贴） 邪恶鳟鱼的例子，执行没有Ember Data的Ember应用程序，以及不了解基础概念就好了。

我的 findAll 方法返回一个Promise对象，尽管控制器期望一个数组，因此未捕获TypeError 。您需要做的是返回一个空的 ArrayProxy ，一旦收到JSON响应，它将被填充。

  App.Employee.reopenClass（{
 findAll：function（）{
 var employees = Ember.ArrayProxy.create（{content：[]}）; 
 $ .getJSON（http：// localhost：49441 / api / employee）.then（
 function（response）{
 response.forEach（function（child）{
 employees.pushObject （App.Employee.create（child））; 
}）; 
} 
）; 
返回雇员; 
} 
}）; 
  

如果使用此方法正确返回数组，则不必明确指定控制器是一个 ArrayController 。

我的问题现在很傻，我知道我做错了什么，但希望它将帮助别人入门。

I created a small example to try and make multiple models work without Ember Data.

App = Ember.Application.create();

App.Router.map(function () {
    this.resource('employees', function () {
        this.route('employee');
    });
});

App.Employee = Ember.Object.extend({});

App.Employee.reopenClass({
    findAll: function () {
        return $.getJSON("http://localhost/api/employee").then(
            function (response) {
                var employees = [];
                response.forEach(function (child) {
                    employees.push(App.Employee.create(child));
                });
                console.log(employees.join('\n'));
                return employees;
            }
        );
    }
});

App.EmployeesController = Ember.ArrayController.extend({});

App.EmployeesRoute = Ember.Route.extend({
    model: function () {
        return App.Employee.findAll();
    }
});

Handlebars:

<script type="text/x-handlebars">
    <p>Application template</p>
    {{#linkTo employees}}<button>Show employees</button>{{/linkTo}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="employees">
    <p>Employees template</p>
    {{#each controller}}
    <p>{{Name}}</p>
    {{/each}}
    {{outlet}}
</script>

When I navigate to the localhost/#/employee url directly, it works perfectly fine, but when I click on the "Show employees" button, I get the following error:

Uncaught TypeError: Object #<Object> has no method 'addArrayObserver' 

I'm probably missing something somewhere, but I'm not exactly sure which object the error is referring to right there. My model hook is being called correctly when I push the button, same as if I navigate with by manually inputting the url, so I don't understand what exactly is different in the two cases mentioned.

解决方案

Finally got this thing working.

My error was to try to recreate (read copy-paste) Evil Trout's example of doing an Ember application without Ember Data, and not understanding the underlying concepts well enough.

My findAll method was returning a Promise object although the controller expects an array, hence the Uncaught TypeError. What you need to do is return an empty ArrayProxy which will be populated once the JSON response is received.

App.Employee.reopenClass({
    findAll: function () {
        var employees = Ember.ArrayProxy.create({ content: [] });
        $.getJSON("http://localhost:49441/api/employee").then(
            function (response) {
                response.forEach(function (child) {
                    employees.pushObject(App.Employee.create(child));
                });
            }
        );
        return employees;
    }
});

If you correctly return an array with this method, you don't have to explicitly specify that the controller is an ArrayController.

My question is kind of silly now that I know what I did wrong, but hopefully it will help someone else getting started.

这篇关于如何在Ember JS中使用多个模型（无Ember Data）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！