ember.js 需要新手建议

Question

我正在尝试学习 ember.js 来制作一个简单的 Web 应用程序。我已经阅读了该主题并完成了 emberjs.com 上的基本教程。到目前为止，我已经成功地使用 PHP 创建了 API 的开头，并且我已经能够将该数据检索到我刚刚起步的应用程序中。到目前为止一切顺利。

作为初学者，我希望从服务器检索用户列表并使用这些值填充 select。 select 位于菜单栏上，selection 驱动应用程序的其余数据。我已将模型放在 models/users.js 中。我在 templates/application.hbs 中定义的应用程序菜单（不确定这是否正确）。

我无法获取从服务器检索到的 select 的用户数据，除非我访问我也已设置的用户路由。如何确保在应用程序初始化时填充用户数据？我如何 apply/filter 来自此组件的 selection 上的其余应用程序数据 - 我是否需要设置全局变量或其他东西？

此外，我正在使用 materializecss，它需要 $('select').material_select();成为运行以呈现 select 输入。我有这个作为：

$( document ).ready(function(){
  $('select').material_select();
});

in templates/route.js 并且在初始页面加载时工作正常，但是在导航到另一个区域并再次返回时，select 没有呈现，从我读过的内容来看，我需要再次调用 material_select()，但我一辈子都想不出这个调用应该去哪里。

如果有人愿意花时间帮助我更好地理解事物，我将不胜感激。

干杯

蒂姆

预加载说明

我希望在主菜单栏（菜单栏组件）上有一个 select 框。用户将使用这个来 select 一个用户。应用程序中的所有内容都将被过滤到当前 selected 用户。我目前有一个 API 端点 (/users.php)，其中 returns 需要数据，但我只能在我访问用户路由时让我的应用程序调用它，这显然是我最初加载应用程序时不会执行此操作。所以我想我需要以某种方式预加载数据，除非有我不知道的更好的方法？

Answer 1

为菜单创建一个组件并将该组件放入application.hbs

然后在组件中像这样放置实体化的东西：（注意这个地方）

//components/menu-bar.js
didInsertElement(){
  this._super(...arguments);
  Ember.$( document ).ready(function(){
  Ember.$('select').material_select();
});
}

和

//templates/application.hbs
{{menu-bar}}
{{outlet}}

更新

创建一个持有当前用户 selection 的服务，并在您希望通过更改用户 selection 进行更改的其他地方使用它。

这些代码只是为了表明您想要的解决方案（根据更改菜单中 selected 用户更改应用程序的其他部分）是服务。

//services/current-selection.js
...
selectedUser: null,
...

和

//components/menu-bar.js

currentSelection: Ember.inject.service(),

actions: {
  selectUser(user){
    this.set('currentSelection.selectedUser', user);
  }
}

并且在另一个地方你希望在 selection 改变时得到通知：

//components/user-info.js
currentSelection: Ember.inject.service(),

和相应的模板

//templates/components/user-info.hbs
{{#if currentSelection.selectedUser}}
  <span>Current Username: <strong>{{currentSelection.selectedUser}}</strong></span>
{{/if}}

预加载用户更新 其实不是预加载

在 menu-bar 组件中加载一个 select 框并通过调用后端服务来填充它。如果将此组件放在 application.hbs 中，您可以确保满足您的需求。

//components/menu-bar.js

store: Ember.inject.store(),
users: Ember.computed(function(){
  return this.get('store').findAll('user');
}),

或

在应用程序路由 model 中挂钩您获取这些用户并传递给 {{menu-bar users=model}}

之类的组件

对于这两个选项，您可以在 menu-bar 模板中使用 users。

但要注意，如果用户数量很多，这对性能或用户体验来说是非常糟糕的。如果您的用户很多，最好使用自动完成组件

ember.js 需要新手建议

ember.js beginner advice required

materialize

ember.js

ember-data