Question

嗨，我是ember js的新手。有人可以帮我解决我的代码吗？我创建了这个，但我不知道如何对每个链接采取行动。当我点击BreakFast时，它应该只显示3个搜索框（BreadType，cheeseType和meatType），其他应该隐藏。午餐和饮料也一样。我还在路由器中创建了菜单路径。

-------------- ///// application.hbs

<h1>Welcome!!</h1>
     {{#link-to 'menu'}}BreakFast{{/link-to}}
     {{#link-to 'menu'}}Lunch{{/link-to}}
     {{#link-to 'menu'}}Drinks{{/link-to}}
    {{outlet}}

------------- ///// menu.hbs

<div>
        <p>Hello from BreakFast</p>
        <label>
            Bread Type:{{input value=bread}}
            Cheese Type:{{input value=cheese}}
            Meat Type:{{input value=meat}}
        </label>
    </div>
<div>
    <p>Hello from Lunch</p>
    <label>
        Calories:{{input value=cal}}
        Price:{{input value=price}}
        Veg/Non-veg:
        <select>
            <option>V</option>
            <option>N</option>
        </select>
    </label>
</div>
<div>
    <p>Hello from Drinks</p>
    <label>
        Drink Name:{{input value=name}}
        Price :{{input value=price}}
        Ice: <select><option>Y</option>
                     <option>N</option>
            </select>
    </label>
</div>

Answer 1

解决此问题的一种方法是使用Ember的路由器为您完成大部分工作。

首先，我们在application下定义三个嵌套路线，对应breakfast，lunch和drinks：

Router.map(function() {
  this.route('breakfast');
  this.route('lunch');
  this.route('drinks');
});

然后，我们只将公共部分放在application模板中，同时将{{outlet}}放在嵌套模板中：

// application.hbs
<h1>Welcome!!</h1>

{{#link-to 'breakfast'}}BreakFast{{/link-to}}
{{#link-to 'lunch'}}Lunch{{/link-to}}
{{#link-to 'drinks'}}Drinks{{/link-to}}

{{outlet}}

最后，您将每个菜单类型放在相应的模板中：

// app/templates/breakfast.hbs
<div>
    <p>Hello from BreakFast</p>
    <label>
        Bread Type:{{input value=bread}}
        Cheese Type:{{input value=cheese}}
        Meat Type:{{input value=meat}}
    </label>

// app/templates/lunch.hbs
<div>
    <p>Hello from Lunch</p>
    <label>
        Calories:{{input value=cal}}
        Price:{{input value=price}}
        Veg/Non-veg:
        <select>
            <option>V</option>
            <option>N</option>
        </select>
    </label>

// app/templates.breakfast.hbs
<div>
    <p>Hello from Drinks</p>
    <label>
        Drink Name:{{input value=name}}
        Price :{{input value=price}}
        Ice:
        <select>
            <option>Y</option>
            <option>N</option>
        </select>
    </label>
</div>

现在你应该只看到你想要的菜单类型！如果没有更多信息，我无法真正建议模型和数据将字段绑定到模型。您还可以使用Ember自动为您创建的index路线，为您在应用中访问/时提供更多模板。

希望这有帮助。

Answer 2

修改：我创建twiddle以反映您的要求。 queryParam示例包含单个模板和控制器

我建议您通过官方ember guides并与ember-twiddle一起玩游戏。以下是我在讨论论坛中reply的评论

queryparams : [type],将其更改为queryparams : ['type'],
在menu.js控制器文件中，你不能像编写代码一样编写代码，这会在编译时抛出语法错误

    import Ember from 'ember';
    queryparams : [type],

    export default Ember.Controller.extend({
        if('breakfast'){
            BreakFast:true
        }
        else if('lunch'){
            Lunch:true
        }
        else if('drinks'){
            Drinks:true
        }

    });

在menu.hbs中，您在input助手中使用了很多属性，但未在相应的控制器/模型中定义。

我在discussion中提到过这个问题。您的用例实现有很多种方法，但我实现了它的复杂需求，它也可以扩展。

1. twiddle用于动态段实现，并包含使用组件帮助器的动态组件呈现。

twiddle用于queryaram，并使用组件帮助程序包含动态组件呈现。

我使用带有动态段和动态组件渲染的URL以及每种菜单类型的组件实现。对你的要求来说可能有点过分，但这会让你有更好的想法。

<强> router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  //introducing dynamic segment for men types
  this.route('menu',{path: 'menus/:menu_id'});
});

export default Router;

<强>路由/ menu.js

import Ember from 'ember';
const { isEqual } = Ember;
export default Ember.Route.extend({
  model(params){    
    //usually we will request data from server through ember-data or ajax call
    var data = '';      
    if(params.menu_id === '1'){
      data = { bread:' bread name',cheese:'cheese name',meat:'meat name '};
    } else if(params.menu_id === '2'){
      data = { cal:'200',price:'20'};
    }    
    data.menu_id = params.menu_id;    
    return data;
  }
});

<强>控制器/ menu.js

import Ember from 'ember';
const {computed} = Ember;
export default Ember.Controller.extend({
  menuNameComponent: computed('model.menu_id',function(){    
    return this.get('model.menu_id') === '1' ? "menu-breakfast" : "menu-lunch";
  })
});

<强> application.hbs

<h1>Welcome!!</h1>
     {{#link-to 'menu' '1'}}BreakFast{{/link-to}}
     {{#link-to 'menu' 2}}Lunch{{/link-to}}     
 {{outlet}}

<强> menu.hbs

<!-- component helper will dynamically load the specified component -->
{{component menuNameComponent}}
{{outlet}}

templates / components / menu-breakfast.hbs 为所有菜单类型实现它。

<div>
        <p>Hello from BreakFast</p>
        <label>
            Bread Type:{{input value=bread}}
            Cheese Type:{{input value=cheese}}
            Meat Type:{{input value=meat}}
        </label>
    </div>
{{yield}}

templates / components / menu-lunch.hbs

<div>
    <p>Hello from Drinks</p>
    <label>
        Drink Name:{{input value=name}}
        Price :{{input value=price}}
        Ice: <select><option>Y</option>
                    <option>N</option>
            </select>
    </label>
</div>
{{yield}}

如何在ember js中的链接之间切换？

2 个答案: