3

次のようなJavaScriptコンストラクターの基本的な考え方を理解しています

function Person(name){
  this.name = name
}

Person.prototype.sayhi = function(){
  return this.name+' says hi !!! '
}
var bob = new Person('bob')
bob.name // bob
bob.sayhi // bob says hi !!!

しかし、実際の webapp でアルバムを作成したい場合、サーバーは json データの配列を送信します

like:[{'id':1,'album_name':'test','user':'user_id'}]

、各配列項目はアルバムである必要があります。この配列項目を使用して、このアルバムをdiv 要素として構築したいのですが、どうすればよいですか?

これが必要な理由は、実際の div 要素としてアルバムを構築できれば、これを行うことができるからです

 Album.prototype.open = function(){
    //some action
 }
 album = new Album(jdata)

 album.click(function(){
    this.open()
 })

これは可能ですか、このコンストラクターを定義する方法、これは本当に私を混乱させるコンストラクターの戻り値と関係があると思います!!!

4

3 に答える 3

2

次のことができます。

var i, data, Albom, albom;

Albom = function Albom(data) {
  var i,
      div = document.createElement('div');

  for(i in data) {
    div.setAttribute('data-'+i, data[i]);
  }

  div.innerHTML = data.album_name;

  for(i in this) {
    if(typeof this[i] === 'function') {
      div[i] = this[i].bind(div);
    } else {
      div[i] = this[i];
    }
  }

  return div;
};

Albom.prototype.open = function open() {
  alert(this.getAttribute('data-id'));
};

data = [
  {'id':1,'album_name':'test1','user':'user_id1'},
  {'id':2,'album_name':'test2','user':'user_id2'}
];

for(i in data) {
  albom = new Albom(data[i]);
  document.body.appendChild(albom);
}

new Albom(data)提供されたオブジェクトの属性を持つ新しい DOM 要素を生成し、data作成された要素内にすべてのプロトタイプ プロパティと関数を持ち、この DOM 要素のスコープ内で実行されます (したがって、そのメソッド内で参照できますthis)。

たとえば、電話をかけるalbom.open()と、テキスト付きのアラート2がポップアップ表示されます。

実例はhttp://jsbin.com/isepay/10/editで見ることができます

于 2013-03-21T08:30:48.190 に答える
0

オブジェクト キーに一致するクラスを含むいくつかのテンプレート ファイルを作成し、キーを循環してテンプレート ファイルに入力します。例えば：

function Album (album) {
    this.template = $('#template').clone().removeAttr('id');
    this.album = album;
}

Album.prototype.html = function () {
    var i, val;
    for (i in this.album) {
      if (!this.album.hasOwnProperty(i)) {
        continue;
      }
      val = this.album[i];
      this.template.find("." + i).html(val);
    }
    console.log(this.template);
    return this.template;
}

var foo = new Album({
    title: 'Cheap Thrills',
    artist: 'Frank Zappa',
    genre: 'Rock and Roll'
});

$('#main').html(foo.html());

すべてのニーズに実際に適合するわけではありませんが、これは万能の試みです。このソリューションがニーズに合わない場合に備えて、条件または何を持っているかを設定できます。たとえば、データが画像の URL の場合、innerHTML を設定してもあまり役に立ちません。そのため、代わりに 'src' 属性を設定するか、SRC 属性を持つ img タグを作成します。

テンプレート ファイルは次のようになります。

<div class="album">
  <div class="user"></div>
  <span class="foo"></span>
  <textarea class="bar"></textarea>
</div>

ここに簡単なフィドルがあります： http://jsfiddle.net/bxw7Z/

クラスを使用するという考えが気に入らない場合は、代わりにデータ属性を試してください。

于 2013-03-21T08:13:33.843 に答える
-2

あなたのアプローチは間違っていると思います。クライアント側のテンプレート エンジン (Handlebars.JS など) を使用して、応答 JSON オブジェクトをレンダリングする必要があります。

次に、コンストラクターとプロトタイプメソッドを次のように定義します

function album(container){
    this.container=container
}

album.prototype.open=function() {
    container.show();
}

album.prototype.renderHTML=function(jdata) {
 //This is handlebar.js code

 template=$('#albumTemplate').text();
 compiledTemplate=Handlebars.compile(template);
 renderedTemplate=compiledTemplate(jdata);
 container.html(renderedTemplate);
}

これが完了すると、アルバムクラスの準備が整い、次のように使用を開始できます

var container=document.getElementById('myalbum001'),
    album=new album(container);

container.on('click',function(e){
    album.render(jdata);  //You can get jdata by making AJAX call before this line
    album.open()  
}

Handlebar.js をざっと見てみることをお勧めします。

于 2013-03-21T08:25:47.460 に答える