在Ember中使用条件

Question

这是我的jsfiddle链接，当选择了除B之外的任何选项时，我尝试在DropDown下面打印一条消息- "Select option B“。

选择选项B时，我必须打印Id和选项名称

http://jsfiddle.net/fortm/MGX9k/1/

发生的情况是"Select Option B“消息永远不会打印出来。始终显示Id和名称。

所以，Handlebar conditional有一些问题-

{{#if App.SearchController.selectedB}}

其中，selectedB是当Option为B时返回true的函数，但这似乎不起作用。

  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }

作为一个次要问题，我需要设置选择下拉列表的样式，所以我添加了"class“属性。它有自定义的样式，但它仍然有ember-select作为样式之一。当添加一个新的自己的样式时，我们可以删除ember CSS吗？

Answer 1

我在这里看到的问题不是条件本身的问题，而是您如何使用数据的问题。以下是一些事情：

(你可以在这里看到更多：http://jsfiddle.net/schawaska/enRhT/)

如果你想让你的模板对selectedB做出反应，你必须让它变成一个computed property，同时指定它的依赖项，在你的例子中是selectedName属性：

selectedB: function() {
    return this.get('selectedName.id') == 2;
}.property('selectedName') // This is important

另外，我注意到在您的模板中，您将绑定分配给了控制器类，而不是实例。考虑更改您的应用程序以包含Router，这将允许您以不同的方式设置模型数据。

通过路由机制，将为您的路由分配一个控制器，并自动绑定到视图/模板，因此您可以使用controller或controller.property完成绑定，而不是绑定到App.SearchController.property

{{view Ember.Select class="my_custom_class"
    contentBinding="controller.content"
    optionValuePath="content.id"
    optionLabelPath="content.firstName"
    selectionBinding="controller.selectedName"}}

这将需要更多的更改。

设置路由器的

App.Router.map(function() {
    this.route('search');
});
// this would require that you either create an IndexRoute 
// to redirect from the root to the SearchRoute, or
// change the route path: this.route('search', { path: '/' }); 

从路由的模型函数而不是从控制器返回数据的

App.SearchRoute = Em.Route.extend({
    model: function() {
        return [
            {firstName: "Any",  id: 0},
            {firstName: "A",    id: 1},
            {firstName: "B",    id: 2},
            {firstName: "C",    id: 3},
            {firstName: "D",    id: 4},
            {firstName: "E",    id: 5}
        ];
    }
});

将 {{outlet}} 添加到应用程序模板

<script type="text/x-handlebars">
{{outlet}}
</script>

使用正确的 controller将模板正文移动到特定模板

现在，因为路由提供了控制器及其数据，所以您应该能够在Handlebar模板中使用controller键，并且它将引用SearchController (见下文)。

<script type="text/x-handlebars" data-template-name="search">
    {{view Ember.Select class="my_custom_class"
       contentBinding="controller.content"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       selectionBinding="controller.selectedName"}}

    {{#if selectedB}}
      <p>Selected: {{controller.selectedName.firstName}}
      (ID: {{controller.selectedName.id}})</p>
    {{else}}
    <p>Select option B</p>
    {{/if}}    
</script>

固定控制器

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,
  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }.property('selectedName')
});

因为有了naming conventions，你的路由需要你的应用程序有一个SearchController (这个确切的名字)，这就是它将所有东西连接在一起的方式。如果您的控制器没有实现ArrayController，它将会崩溃，因为您的模型函数现在返回一个ModelArray，并且它不会绑定到ObjectController (默认)

Answer 2

这是一个working version。以下是我更改的一些最重要的内容：

1. 我在SearchRoute中移动了您的内容设置：

App.SearchRoute = Ember.Route.extend({ model: function () { return [ Ember.Object.create({firstName："Any"，id: 0})，

• I修复了您的搜索控制器，使其使用extend而不是create，并使selectedB成为计算属性：

App.SearchController = Ember.ArrayController.extend({ selectedName: null，selectedB: function() { //小心！如果您使用Ember Data，则键将是' 2 '，而不是2。return this.get('selectedName.id') === 2；}.property("selectedName.id") })；

• 我给了SearchController自己的模板，并修改了代码以使用相对属性，而不是试图将控制器作为全局访问。我还连接了contentBinding以指向您的搜索控制器，它充当实际内容的代理。

还有一些其他的小变化。