Ember.js 在余烬中使用条件

这是我的JSFIDLE链接，当选择B以外的任何选项时，我试图在下面的下拉列表中打印一条消息-“选择选项B”

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

发生的情况是，“选择选项B”消息永远不会打印出来。始终显示Id和名称

所以，车把有一些问题-

{{#if App.SearchController.selectedB}}

其中，selectedB是一个在选项为B时返回true的函数，但这似乎不起作用

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

作为一个附带问题，我需要设置Select下拉列表的样式，所以我添加了“class”属性。它得到了自定义样式，但仍将余烬选择作为样式之一。。我们可以在添加新的自己的样式时删除余烬CSS吗？

下面是一个例子。以下是我改变的一些最重要的事情：

我已将您的内容设置移动到

SearchRoute

中它所属的位置：

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

我已将您的搜索控制器固定为使用

extend

而不是

create

，并将

selectedB

设置为计算属性：

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,

  selectedB: function() {
    // Be careful! If you use Ember Data, the key will be '2', not 2.
    return this.get('selectedName.id') === 2;
  }.property("selectedName.id")
});

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

我给了

SearchController

它自己的模板，并修改了代码以使用相对属性，而不是试图作为全局对象访问控制器。我还连接了

contentBinding

指向您的搜索控制器，它充当您实际内容的代理

<script type="text/x-handlebars" data-template-name="search">

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

{{view Ember.Select class=“my_custom_class”
contentBinding=“this”
optionValuePath=“content.id”
optionLabelPath=“content.firstName”
selectionBinding=“selectedName”}

还有一些其他的小变化。

这里是一个例子。以下是我改变的一些最重要的事情：

我已将您的内容设置移动到

SearchRoute

中它所属的位置：

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

我已将您的搜索控制器固定为使用

extend

而不是

create

，并将

selectedB

设置为计算属性：

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,

  selectedB: function() {
    // Be careful! If you use Ember Data, the key will be '2', not 2.
    return this.get('selectedName.id') === 2;
  }.property("selectedName.id")
});

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

我给了

SearchController

它自己的模板，并修改了代码以使用相对属性，而不是试图作为全局对象访问控制器。我还连接了

contentBinding

指向您的搜索控制器，它充当您实际内容的代理

<script type="text/x-handlebars" data-template-name="search">

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

{{view Ember.Select class=“my_custom_class”
contentBinding=“this”
optionValuePath=“content.id”
optionLabelPath=“content.firstName”
selectionBinding=“selectedName”}

---

还有一些其他的小改动。

我在这里看到的问题不是条件本身，而是如何使用数据。有几件事：

（您可以在此处看到更多信息：）

如果您希望模板对

selectedB

作出反应，则必须将其转换为，同时指定其依赖项，在您的情况下，这是

selectedName

属性：

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,

  selectedB: function() {
    // Be careful! If you use Ember Data, the key will be '2', not 2.
    return this.get('selectedName.id') === 2;
  }.property("selectedName.id")
});

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

另外，我注意到，在模板中，您将绑定分配给控制器类，而不是实例。考虑更改应用程序以包含<代码>路由器>代码>，这将允许您以不同的方式设置模型数据。p> 使用路由机制，控制器将被分配到您的路由并自动绑定到视图/模板，因此，您可以使用

控制器或
控制器属性来执行此操作，而不是绑定到
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}
        ];
    }
});

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,
  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }.property('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}
        ];
    }
});

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

向应用程序模板添加
{{outlet}

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

固定控制器

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}
        ];
    }
});

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

因为，你的路线希望你的应用程序有一个
SearchController
（这个确切的名称），这就是它将所有东西连接在一起的方式。如果你的控制器没有实现一个
ArrayController
，它会爆炸，因为你的模型函数现在返回一个
ModelArray
，它不会绑定到
ObjectController
（默认）
我在这里看到的问题不是条件本身，而是你如何使用你的数据。有几件事：

（您可以在此处看到更多信息：）

如果您希望模板对
selectedB
作出反应，则必须将其转换为，同时指定其依赖项，在您的情况下，这是
selectedName
属性：

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,

  selectedB: function() {
    // Be careful! If you use Ember Data, the key will be '2', not 2.
    return this.get('selectedName.id') === 2;
  }.property("selectedName.id")
});

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

另外，我注意到，在模板中，您将绑定分配给控制器类，而不是实例。考虑更改应用程序以包含<代码>路由器>代码>，这将允许您以不同的方式设置模型数据。p>
使用路由机制，控制器将被分配到您的路由并自动绑定到视图/模板，因此，您可以使用
控制器或
控制器属性来执行此操作，而不是绑定到
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}
        ];
    }
});

App.SearchController = Ember.ArrayController.extend({
  selectedName: null,
  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }.property('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}
        ];
    }
});

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

向应用程序模板添加
{{outlet}

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

固定控制器

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}
        ];
    }
});

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

因为，你的路线希望你的应用程序有一个
SearchController
（这个确切的名称），这就是它将所有东西连接在一起的方式。如果你的控制器没有实现一个
ArrayController
，它会爆炸，因为你的模型函数现在返回一个
ModelArray
，它不会绑定到
ObjectController
（默认）
，谢谢MilkyWayJoe和emk，我希望我能接受这两个答案。使用路由器真的很优雅，而且注意到了余烬数据提示。没问题！这是一个有趣的调试挑战。谢谢MilkyWayJoe和emk，我希望我能接受这两个答案。使用路由器是非常优雅和余烬数据