web-dev-qa-db-ja.com

ember）でドロップダウンを選択します

選択入力を生成し、選択したオブジェクトをビューの変更イベントに渡そうとしています。 ember連絡先の例では<ul>ただし、選択すると、ビューはそれぞれの外側にある必要があります。そうでない場合、変更は実行されません。

これがビューjsです：

App.SelectView = Ember.View.extend({

    change: function(e) {
        //event for select
        var content = this.get('content');
        console.log(content);   

        App.selectedWidgetController.set('content', [content]);
    },
    click: function(e) {
        //event for ul
        var content = this.get('content');
        console.log(content);   

        App.selectedWidgetController.set('content', [content]);
    }
});

例のulは機能します。

<ul>
    {{#each App.widgetController.content}}
        {{#view App.SelectView contentBinding="this"}}
            <li>{{content.name}}</li>
        {{/view}}
    {{/each}}
</ul>

しかし、htmlを直接置き換えると、変更イベントは発生しません（これは理にかなっています）

<select>
    {{#each App.widgetController.content}}
        {{#view App.SelectView contentBinding="this"}}
            <option>{{content.name}}</option>
        {{/view}}
    {{/each}}
</select>

したがって、選択をビューでラップする必要があると思います。その場合、関連するオブジェクトを渡すにはどうすればよいですか？...このコードにより、配列全体が渡されます。

{{#view App.select_view contentBinding="App.widgetController.content"}}
    <select>
    {{#each App.widgetController.content}}
        <option>{{name}}</option>
    {{/each}}
    </select>
{{/view}}
ember.js
19
Hayden Chambers

Emberには組み込みの選択ビューがあります。

使用例は次のとおりです。

var App = Ember.Application.create();

App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,

    fullName: function() {
        return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName').cacheable()
});

App.selectedPersonController = Ember.Object.create({
    person: null
});

App.peopleController = Ember.ArrayController.create({
    content: [
        App.Person.create({id: 1, firstName: 'Yehuda', lastName: 'Katz'}),
        App.Person.create({id: 2, firstName: 'Tom', lastName: 'Dale'}),
        App.Person.create({id: 3, firstName: 'Peter', lastName: 'Wagenet'}),
        App.Person.create({id: 4, firstName: 'Erik', lastName: 'Bryn'})
    ]
});

テンプレートは次のようになります。

{{view Ember.Select
       contentBinding="App.peopleController"
       selectionBinding="App.selectedPersonController.person"
       optionLabelPath="content.fullName"
       optionValuePath="content.id"}}

繰り返しますが、ここにjsFiddleの例があります： http://jsfiddle.net/ebryn/zgLCr/

36
ebryn

同様の質問への回答を確認してください： 入力選択から値をコントローラーの属性にバインドする方法

例では、CollectionViewはtagName = selectとともに使用されます。あなたはそれを機能させるのにこれが役立つと思うかもしれません。

編集：私は自分でselectを実装しようとしていたので、これが私が思いついた解決策です：

views/form.js.hjs：

{{#view contentBinding="App.typeController" valueBinding="type" tagName="select"}}
    {{#each content}}
        <option {{bindAttr value="title"}}>{{title}}</option>
    {{/each}}
{{/view}}
{{#view Ember.Button target="parentView" action="submitEntry"}}Save{{/view}}

選択はフォームの一部です。私は送信イベントをチェックし、そこで値を読み取ります：

app.js.coffee

# provides the select, add value: 'my_id' if you need differentiation
# between display name (title) and value
app.typeController = Ember.ArrayProxy.create
  content: [{title:'Energy'}, {title:'Gas'}, {title:'Water'}]

# simplified version, but should prove the point
app.form_view = Ember.View.create
  templateName: 'views_form'
  type: null
  submitEntry: () ->
    console.log this.$().find(":selected").val()

お役に立てれば。

2
dhenze

これは答えではなく、壊れたjsfiddleリンクを修正するだけです。どうやらjsfiddleはember：/しかし、JsBinは好きです！ http://jsbin.com/kuguf/1/edit

2
micahblu