3

実際のモデル プロパティが設定されていない場合、ビューを特定の値にデフォルト設定したいことがよくあります。このプレースホルダーのテキスト/値は厳密には表示専用であるため、モデル imo に配置しないでください。

だから、これは私がやっていることです：

// Sample 'Model' for illustration purposes only.
var myModel = Ember.Object.extend({
  title: null,

  description: null,

  thumbUrl: null
});

/**
 * Sample View
 * Render view properties which are actually 
 * computed of the actual 'content' properties
 */
var myView = Ember.View.extend({
  template: Ember.Handlebars.compile('<p>Title: {{view.title}}</p> <p>Description: {{view.description}}</p> <p>Image: <img {{bindAttr src="view.thumbUrl"}}/></p>'),

  title: function () {
    return this.get('content.title') || 'Title goes here';// placeholder 'title' text
  }.property('content.title'),

  description: function () {
    return this.get('content.description') || 'This is your description'; // placeholder 'description'
  }.property('content.description'),

  thumbUrl: function () {
    return this.get('content.thumbUrl') || 'http://placehold.it/100x100';
  }.property('content.thumbUrl')
});

これらすべてのプロパティ、つまり「タイトル」、「説明」、「thumbUrl」のデフォルトを定義する際にボイラープレートを減らす方法についての提案はありますか?

Ember.computed.defaultToを調べましたが、使い方がわかりませんでした。これは私が実際にそれを想像する方法です：

var myView = Ember.View.extend({
  template: Ember.Handlebars.compile('<p>Title: {{view.title}}</p> <p>Description: {{view.description}}</p> <p>Image: <img {{bindAttr src="view.thumbUrl"}}/></p>'),

  title: Ember.computed.defaultTo('content.title', 'Title goes here'),

  description: Ember.computed.defaultTo('content.description', 'This is your description'),

  thumbUrl: Ember.computed.defaultTo('content.thumbUrl', 'http://placehold.it/100x100')
});

では、これはどのように行うことができますか？

この種のことを行うためのより良いアプローチがあれば、コメントで聞きたいです。

また、Ember.computed.defaultTo の機能へのポインタも非常に役立ちます。

4

1 に答える 1

3

これはEmber.computed.defaultTo意図したものではありません。Ember.computed.defaultTo は単一のdefaultPathパラメータを取ります。ドキュメントから：

標準の getter および setter のように機能する計算されたプロパティですが、デフォルトは からの値ですdefaultPath。

テストを読むと、いくつかの光が当てられます。

testBoth('Ember.computed.defaultTo', function(get, set) {
  var obj = { source: 'original source value' };
  Ember.defineProperty(obj, 'copy', Ember.computed.defaultTo('source'));

  equal(get(obj, 'copy'), 'original source value');

  set(obj, 'copy', 'new copy value');
  equal(get(obj, 'source'), 'original source value');
  equal(get(obj, 'copy'), 'new copy value');

  set(obj, 'source', 'new source value');
  equal(get(obj, 'copy'), 'new copy value');

  set(obj, 'copy', null);
  equal(get(obj, 'copy'), 'new source value');
});

代わりに、次のように独自のヘルパーを作成できます。

Ember.computed.defaultValue = function(dependentKey, defaultValue) {
  return Ember.computed(dependentKey, function() {
    return Ember.get(this, dependentKey) || defaultValue;
  });
};

var myView = Ember.View.extend({
  template: Ember.Handlebars.compile('<p>Title: {{view.title}}</p> <p>Description: {{view.description}}</p> <p>Image: <img {{bindAttr src="view.thumbUrl"}}/></p>'),

  title: Ember.computed.defaultValue('content.title', 'Title goes here'),

  description: Ember.computed.defaultValue('content.description', 'This is your description'),

  thumbUrl: Ember.computed.defaultValue('content.thumbUrl', 'http://placehold.it/100x100')
});

独自のヘルパー関数を作成したくない場合は、別の方法として、既定値に個別のプロパティを使用してから を使用しますEmber.computed.any。

var myView = Ember.View.extend({
  template: Ember.Handlebars.compile('<p>Title: {{view.title}}</p> <p>Description: {{view.description}}</p> <p>Image: <img {{bindAttr src="view.thumbUrl"}}/></p>'),

  defaultTitle: 'Title goes here',
  title: Ember.computed.any('content.title', 'defaultTitle'),

  defaultDescription: 'This is your description',
  description: Ember.computed.any('content.description', 'defaultDescription'),

  defaultThumbUrl: 'http://placehold.it/100x100',
  thumbUrl: Ember.computed.any('content.thumbUrl', 'defaultThumbUrl')
});
于 2013-07-20T04:01:09.113 に答える