0

残り火: 1.10.0

Ember データ : 1.0.0-beta.16

jQuery: 1.11.2

次のようにコントローラーでビューを動的に作成するために、 this.container.lookup を使用しています。

var popup = this.container.lookup('view:map-popup', {singleton: false});
var ctrl = this.container.lookup('controller:map-popup', {singleton: false});
popup.set('controller', ctrl);
popup.createElement();

ビューは次のように定義されます。

export default Ember.View.extend({
  templateName: "mapPopup",
  classNames: ["map-popup"]
});

ビュー テンプレート:

<a class="popup-closer" {{action 'closePopup'}}></a>
<div class="popup-content">{{content}}</div>

およびビューのコントローラー:

export default Ember.ObjectController.extend({

  hide: function() {
    console.log("i'm hidden");
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

ビューは、コントローラーによって DOM に正しく挿入されます。

<div class="ember-view map-popup" id="ember643">
  <a data-ember-action="645" class="popup-closer"></a>
  <div class="popup-content">571187.3674937992,5721182.413928764</div>
</div>

しかし、ポップアップクローザーをクリックしても何も起こりません。

アクションをビューのコントローラーにバインドする方法を誰かが教えてくれたらうれしいです。

アルバートのアドバイスに従って、コンポーネントをセットアップしようとしました。

//app/components/map-popup.js
export default Ember.Component.extend({
  classNames: ['map-popup'],
  layoutName: 'components/map-popup',

  content: function() {
    return "some content";
  },

  hide: function() {
    console.log('hidden');
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

テンプレートは同じです。前と同じですが、templates/components フォルダーにあります。

結果は以前より最悪です。コンテンツテキストではなくテキストとして関数を表示するポップアップが表示されます...

ここに画像の説明を入力

アクションがトリガーされます。コンテンツが表示されないという問題は、jquery を使用して解決されました。

  setUp: function() {
    this.$('.popup-content').html(this.content());
  }.on('didInsertElement'),

ハンドルバーで {{content}} を一方向にバインドしたいのですが、これを行う方法がわかりません。

4

1 に答える 1

1

@albertjanは正しいです。これはコンポーネントでなければなりません。それは正しい方向です。

このように計算されたプロパティを作成すると、値が返されない問題をcontent()解決できます

export default Ember.Component.extend({
  classNames: ['map-popup'],
  layoutName: 'components/map-popup',

  /*Notice the .property('') */
  content: function() {
    return "some content";
  }.property(''),

  hide: function() {
    console.log('hidden');
  },

  actions: {
    closePopup: function() {
      this.hide();
    }
  }
});

function()なぜこれが機能するのか、テンプレートで単純な関数を使用すると、文字列値（本体）を持つ属性にすぎません

関数の戻り値を使用するには、計算されたプロパティの概念を使用します。

計算されたプロパティも引数を受け入れ、このような 2 つ以上のプロパティの結果を組み合わせるのに役立ちます。依存プロパティが変更されると、その出力が更新されます。

例は、Emberjs.comにあります。

var Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: function() {
    var firstName = this.get('firstName');
    var lastName = this.get('lastName');

   return firstName + ' ' + lastName;
  }.property('firstName', 'lastName')
});

var tom = Person.create({
  firstName: 'Tom',
  lastName: 'Dale'
});

tom.get('fullName') // 'Tom Dale'
于 2015-04-16T04:56:23.880 に答える