3

@andorovの回答で述べたように、OPの理想的なコード（ Ember1.10の時点で<div style="width:{{model.width}}">ほとんど機能します）

私はEmber.jsを初めて使用しますが、CSSを動的に変更するのは難しいと感じています。これが私が何を意味するかを説明する例です：

var App = Em.Application.create();

App.MyObj=Em.Object.extend({
    objWidth:10
});

App.objController = Ember.ArrayController.create({
    content: [],
  createObj: function(){
      var obj = App.MyObj.create();
      this.pushObject(obj);
  }
});

以下のコードは機能しませんが、私の目標を説明しています。ハンドルバーテンプレートを使用して、これを実現したいと思います。

{{#each obj in App.objController}}
     <div style="width:{{obj.objWidth}}"></div>
{{/each}}

つまり、プロパティが変更され<div>たときの更新の幅だけが必要です。objWidth

4

3 に答える 3

6

プロパティは、プロパティの1つだけでなく、スタイル全体を渡すstyleことでバインドする必要があります。これは、プロパティを理解していないためです。このプロパティは、直接の要素を対象とした文字列としてのスタイルへのアクセスのみを提供します。そのように定義した場合、スタイルのプロパティにバインドすることはできません。bindAttr

だからここに私の推測があります：私は次のようないくつかの「モデル」クラスを作成し、ピクセル単位で幅を返すプロパティを実装しました：

var WidthEnabledModel = Em.Object.extend({
    width: 100,
    unit: "px",
    widthString: function() {
        return 'width: %@%@'.fmt(this.width, this.unit);
    }.property('width', 'unit')            
});

App.SampleModel = WidthEnabledModel.extend({
    itemName: ''
});

style次に、コレクション内の各アイテムについて、そのプロパティを属性にバインドします。

<script type="text/x-handlebars" data-template-name="sample">
    <div id="sample_area" style="width: 250px;">
    {{#each thing in controller.content}}
      <div class="item" {{bindAttr style="thing.widthString"}}>
          {{thing.itemName}}<br />
          {{thing.widthString}}
      </div>
    {{/each}}
    <div>
</script>

ここでjsfiddleで作成した完全なコードを使用して例に従ってくださいhttp://jsfiddle.net/schawaska/ftWZ6/

編集： 機能を追加するためにフィドルにいくつかの変更を加えましたが、幅を設定する部分は同じままです。

于 2012-10-15T22:14:06.360 に答える
1

元のソリューションstyle="{{dynamicStyleAttribute}}"は、新しいバインドされた属性構文で機能するようになりました -http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_bound-attribute-syntax

pxの値にaを追加しwidth:300px、それも呼び出す必要がありますEmber.String.htmlSafe('your string')。

まだいくつかの未解決の問題があることに注意してください：https： //github.com/emberjs/ember.js/issues/10783 https://github.com/emberjs/ember.js/issues/10870

于 2015-09-15T18:28:17.690 に答える
0

ビューを作成してコントローラーにバインドしてみましたか？

例えば：

Javascriptの場合：

App.objView = Ember.View.extend({
    contentBinding : 'App.objController',
    widthBinding : 'content.width'
});

ハンドルバー：

{{#each Ember.App.objController}}
    {{#view Ember.App.objView contentBinding="this"}}
        <div style="width: {{width}};"></div>
    {{/view}}
{{/each}}
于 2012-10-15T19:41:38.257 に答える