3

これは「先行入力」の状況に固有であり、私の例には静的なコンテンツが含まれている可能性がありますが、実際には、これは「データソース」のブートストラップ使用に適用されます。いつか私が成長したときに、先行入力の実装に​​動的コンテンツを使用したいので、今のところバインディング方法を試しています：

Ember.TextField.reopen({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'dataSourceBinding:data-source'],
    'dataSourceBinding': Ember.Binding.oneWay('App.AddStoreTemplateController.statesArray')
});

テンプレートを接続するconnectOutletsを備えたルーターがあります。

{{view Ember.TextField elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray"}}

私のコントローラー：

    AddStoreTemplateController: Ember.ArrayController.extend({
            statesArray: ['Alabama', 'Washington']
    }),

HTMLでレンダリングされると私が期待するもの：

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="['Alabama', 'Washington']">

実際にHTMLでレンダリングされるもの：

<input id="state" class="ember-view ember-text-field" placeholder="NY/New York" type="text" data-provide="typeahead" data-items="4" data-source="App.router.addStoreTemplateController.statesArray">

Typeaheadドキュメント http://twitter.github.com/bootstrap/javascript.html#typeahead

本当にありがとう。私はEmberJSを本当に楽しんでいます!!

4

3 に答える 3

5

これをもう少しいじった後、私はこれを行う簡単な方法を見つけました。サードパーティのライブラリは必要ありません。Ember.TextFieldを使用して入力をきれいに保つことができます。

物事を分離するために、新しい拡張TextFieldオブジェクトを作成しました。

Ember.TextFieldTypeahead = Ember.TextField.extend({
    //add some bootstrap specific stuff
    attributeBindings: ['data-provide', 'data-items', 'data-source'],
    'data-source': function(){
            return JSON.stringify(["Alabama", "Washington"]);
    }.property()
});

次に、私のテンプレートで：

{{view Ember.TextFieldTypeahead elementId="state" placeholder="NY/New York" valueBinding="state" data-provide="typeahead" data-items="4" data-source=on}}

物事はうまくいきました。私にとって紛らわしいのは、これはEmberのバグか、フレームワークのnoobステータスかもしれませんが、テンプレート内のdata-source =は何でもかまいませんが、それでも私が宣言した関数を参照しています。テンプレートで「data-source」のままにしておくと、ハンドルバーのビルドでエラーが発生するため、値を「on」にすることを選択したので、何らかの理由でコードを再検討したときに6か月以内に混乱することはありません。奇妙。

また、これをさらに拡張して「値」を観察し、値を変更すると、動的要件を満たすためにサーバーが応答するajax呼び出しを「data-source」プロパティに入力できると思います。

于 2012-12-02T23:33:42.603 に答える
2

次のようなこともできます（サーバーから入力するときにデータを動的にロードする場合）。

残り火-ブートストラップ

EEPD.EbedMedicationArticleTypeAhead = Bootstrap.Forms.TypeAhead.extend({
    init: function () {
        this._super();

        this.set('idProperty', 'id');
    },

    valueChanged: function () {
        var id = this.get('value');
        var self = this;

        var label = this.get('_childViews')[1].$()
                        .val();

        if (Ember.empty(label) && !Ember.empty(id)) {
            var articleDescription = this.get('item.articleDescription');
            self.get('_childViews')[1].$()
                .val(articleDescription)
                .change();
        }
    } .observes('value'),

    getLabel: function (item) {
        return '%@ (%@)'.fmt(Ember.get(item, 'description'), Ember.get(item, 'amount'));
    },

    getQueryPromise: function (query) {
        //get some data from SignalR
        return $.connection.ccprCardioArticles.server.getAllByDescriptionLike(query);
    }
});

ハンドルバーは次のようになります。

{{view EEPD.EbedMedicationArticleTypeAhead
      label="Medicament:"
      name="articleNumber"}}

結果：

ここに画像の説明を入力してください

ここに画像の説明を入力してください

于 2012-11-30T08:13:00.847 に答える
0

このため、私はを使用しませんEmber.TextField。あなたは次のようなことをすることができます：

<input ... data-items="4" {{bindAttr data-source="formattedDataSource"}}/>

コントローラ内：

formattedDataSource: function(){
  .. format your states array as a string or dump to json...
}.property()
于 2012-11-30T04:57:22.880 に答える