0

Here is my jsfiddle link and I am trying to print below DropDown a message - "Select option B" when any option other than B is selected.

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

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

发生的事情是“选择选项 B”消息永远不会被打印出来。总是显示 ID 和名称。

因此，Handlebar 条件存在一些问题 -

{{#if App.SearchController.selectedB}}

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

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

作为一个附带问题，我需要设置 Select Dropdown 的样式，因此我添加了“class”属性。它具有自定义样式，但仍然具有 ember-select 作为样式之一。我们可以在添加新样式时删除 ember CSS 吗？

4

2 回答 2

2

我在这里看到的问题与条件本身无关，而与您如何使用数据有关。一些东西：

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

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

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

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

App.SearchController.property使用路由机制，控制器将被分配给您的路由并自动绑定到视图/模板，因此您可以使用controlleror来代替绑定到controller.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

现在，因为路由提供了控制器和它的数据，你应该能够controller在你的 Handlebars 模板中使用这个键，它将引用 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')
});

由于命名约定，您的路线希望您的应用程序有一个SearchController（这个确切的名称），这就是它将所有东西连接在一起的方式。如果你的控制器没有实现 a ArrayController，它会爆炸，因为你的模型函数现在返回 aModelArray并且它不会绑定到 a ObjectController（默认）

于 2013-04-09T17:37:47.163 回答
1

这是一个工作版本。以下是我更改的一些最重要的内容：

  1. 我将您的内容设置移到了SearchRoute它所属的位置：

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

  2. 我将您的搜索控制器修复为使用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")
});

  3. 我提供了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"}}

还有其他一些小的变化。

于 2013-04-09T17:36:35.997 回答