0

Ember.View を使用してテキストボックスを表示しました。モデルでは、入力のすべての詳細を指定しました。

App.Display = DS.Model.extend({
inputText: DS.attr('string'),
width: DS.attr('string'),
height: DS.attr('string'),
className: DS.attr('string')
})
App.Display.FIXTURES = [{
id: '1',
innnerText : 'helo',
width: '197px',
height: '25px',
className: 'DisplayClass'
}]

モデルから、className、width、height、およびinnerTextを表示ユニットに追加するにはどうすればよいですか。

これが私のdisplayViewです

 <script type="text/x-handlebars" data-template-name="_display">
{{#view 'App.DisplayView'}}{{/view}}
 </script>

 App.DisplayView = Ember.View.extend({
tagName: 'input',

});

 App.DisplayController = Ember.ArrayController.extend({
actions: {

}
});

コントローラーを介してビューにモデル データ (つまり、innerText、dimensions、className) を設定する方法。注：私は this.resource('somename') を使用していません

IndexRoute でコントローラーを設定しました

  setupController: function (controller, model) {
    controller.set('model', model);
    this.controllerFor('Display').set('model', model.displayInput);

IndexRoute 内

App.IndexRoute = Ember.Route.extend({
model: function(){
    return {
        //findall of model name 
        displayInput : this.store.findAll('display')
 }
 }

次に、モデルを使用して入力の値を設定および取得します

4

1 に答える 1

2

JS Bin で動作するデモ。コンポーネントの代わりにビュー（現在は非推奨の機能）を使用しているため、コードの見栄えが悪くなり、必要な動作を実装するための理想的なツールではありません。代わりに、コンポーネントを使用するようにアプローチを変更しました。また、FixturesinnnerTextでは の代わりに定義しましinputTextた。

それでは、コンポーネントから始めましょう。コード：

App.DisplayComponentComponent = Ember.Component.extend({
   tagName: 'input',
  attributeBindings: ['style', 'value'],
  style: Ember.computed('model', 'model.{width,height}', function() {
    var ret = '',
        width = this.get('model.width'),
        height = this.get('model.height');

    if (width) {
      ret += 'width: ' + width + ';';
    }

    if (height) {
      ret += 'height: ' + height + ';';
    }

    return ret;
  })
});

コンポーネント テンプレート:

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

次に、フィクスチャを修正します。

App.Display.FIXTURES = [{
id: '1',
inputText : 'helo',
width: '197px',
height: '25px',
className: 'DisplayClass'
}];

にも問題がありますmodel。モデルだけでディスプレイコントローラーのモデルを初期化する方が簡単だと思いますsetupController。

setupController: function (controller, model) {
    controller.set('model', model);
    this.store.findAll('display').then(function(displays) {
        this.controllerFor('display').set('model', display.get('firstObject'));
    });
}

次に、それを使用する場合は、次のようにします(_displayテンプレートを使用して例を使用していますが、これをどのように使用するのかわかりません):

<script type="text/x-handlebars" data-template-name="_display">
{{display-component model=model class=model.className value=model.inputText}}
</script>

_display質問がまったく明確ではないため、テンプレートはディスプレイコントローラー用であると想定する必要があります。

于 2015-06-20T19:23:58.320 に答える