Question

我正在尝试学习ember.js来生成一个简单的Web应用程序。我已经阅读了这个主题并完成了emberjs.com的基础教程。到目前为止，我已经设法使用PHP创建API的开头，我已经能够将这些数据检索到我刚刚开始的应用程序中。到目前为止一切都很好。

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

我无法获取从服务器检索到的select的用户数据，除非我访问了我已设置的用户路由。如何确保在应用程序初始化时填充用户数据？在从该组件中选择时，如何应用/过滤其余的应用程序数据 - 我是否需要设置全局变量或其他内容？

此外，我使用的是materializecss，它需要$（＆＃39; select＆＃39;）。material_select（）;要运行以呈现选择输入。我有这个：

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

在templates / route.js中并且在初始页面加载时工作正常，但是在导航到另一个区域并再次返回时，选择不会被渲染，而且从我读过的内容中，我需要再次调用material_select（），但是我不能为我的生活找到应该去的地方。

如果有人愿意花时间帮助我更好地理解事情，我将非常感激。

干杯

添

预加载澄清

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

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}}

<强>更新

创建一个包含当前用户选择的服务，并通过更改用户选择在要更改的其他位置使用它。

这些代码仅用于显示您想要的解决方案（根据更改菜单中所选用户更改应用程序的其他部分）是服务。

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

和

//components/menu-bar.js

currentSelection: Ember.inject.service(),

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

在另一个地方，您希望在选择更改时收到通知：

//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组件中，您加载一个选择框，并通过调用后端服务来填充它。如果您将此组件放在application.hbs中，则可以确保满足您的要求。

//components/menu-bar.js

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

OR

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

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

但请注意，如果用户数量很多，这对性能或用户体验非常不利。如果你的用户很多，最好从自动完成组件中使用

需要ember.js初学者建议

1 个答案: