Question

我正在Ember制作一个鸡尾酒食谱应用程序，我想在模板中显示一个现有成分列表，用于创建新配方。这是我的路线：

App.Router.map(function() {
  this.route('drinks', {path: '/drinks'});
  this.route('drink', {path: '/drinks/:drink_id'});
  this.route('newdrink', {path: '/drinks/newdrink'});
  this.route('ingredients', {path: '/ingredients'});
  this.route('ingredient', {path: '/ingredients/:ingredient_id'});
  this.route('newingredient', {path: '/ingredients/new'});
});

这是制作新饮料的模板：

<script type="text/x-handlebars" id="newdrink">
   <h3>Create a new drink.</h3>

   <p>{{input type="text" classNames="form-control" placeholder="Enter a new drink." value=newDrinkName action="createDrink"}}</p>
   <p>{{input type="text" classNames="form-control" placeholder="Enter a description." value=newDescription action="createDrink"}}</p>

   <p>Ingredients</p>
   {{#each ingredient in ingredients}}
     {{ingredientName}}<br />
   {{/each}}
</script>

显然，我在这里遗漏了一些东西。如何在不将饮料路线中的成分路线嵌套的情况下从数据库中提取成分列表？

Answer 1

首先你的路线应该是这样的：

App.Router.map(function() {
  this.resource('drinks', {path: '/drinks'}, function(){
      this.resource('drink', {path: '/drink/:drink_id'});
      this.route('newdrink', {path: '/newdrink'});
  });

  this.route('ingredients', {path: '/ingredients'}, function(){
      this.resource('ingredient', {path: '/ingredient/:ingredient_id'});
      this.route('newingredient', {path: '/new'});
  });
});

现在关于从数据库中提取数据 - 应该通过模型来完成 - 而不是通过路径/控制器，这意味着应该有一个Drink模型，通过ember-data / ember-model的hasMany关系来引用成分 - 这样它会自动从DB中提取出来。

App.Drink = DS.Model.extend({
      name: DS.attr('string'),
      ingredients: DS.hasMany('ingredient')
});
App.Ingredient = DS.Model.extend({
      name: DS.attr('string'),
      Drinks: DS.hasMany('drink')
});

当然，您必须为这些模型定义AJAX接口/适配器。然后你就可以做到这一点：

App.DrinksDrinkRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('post', params.drink_id);
    }
});

这将使所请求的饮料成为模板控制器的模型，并使模板中的成分可以作为model.ingredients（或者只是成分，取决于控制器类型）。

列出来自Ember.js中另一个控制器模板中的一个控制器的项目

1 个答案: