0

JSONオブジェクト/配列とインターフェイスする単純なjQueryプラグインを作成しています。そのオブジェクト配列を十分に柔軟にして、人々が自分のオブジェクトをプラグイン関数に渡すことができるようにしたいと思います。JSONオブジェクトで2つの異なる値を取得する方法をプラグインに通知できるようにしたいと思います。たとえば、これがJSONであるとしましょう-

[
    {
      name: "Baseball Opening Day",
      format: "jpg",
      urls: {
        small: "http://myurl.com/images/small/baseball.jpg",
        big: "http://myurl.com/images/big/baseball.jpg"
      }
    },

    // etc.
]

プラグインが画像オブジェクトの配列を「認識」しているが、それらの画像オブジェクトはさまざまな方法でフォーマットされている可能性がある場合、さまざまなものを見つける場所を指定するオプションをどのように渡すことができますか？たとえば、キャプションを表示したい場合は、キャプション値への参照を求めます。これはかなり簡単です：

$("gallery").myPlugin({
  references: {
    caption: "name"
  }
});

プラグイン内では、収集された画像オブジェクトをループすると、次のような値に到達できます。

// Assuming the value passed in is called "options"...
var caption = image[options.references.caption];

これは、image.nameと同じで正常に機能するimage["name"]として解釈されます。

しかし、プラグインにimage.urls.smallにアクセスする方法をどのように伝えますか？あなたはこれを行うことはできません：

$("gallery").myPlugin({
  references: {
    caption: "name",
    urlSmall: "urls.small"
  }
});

image ["urls.small"]として解釈され、。を返すためundefinedです。

これを渡す方法はありますか？または、その時点で、次のようなコールバック関数を使用する必要がありますか？

$("gallery").myPlugin({
  references: {
    caption: "name",
    urlSmall: function () {
      return this.urls.small;
    }
  }
});

// Call it like this inside the plugin image loop
var urlSmall = options.references.urlSmall.call( image );

それがオプションであることは知っていますが、代わりにネストされたオブジェクトプロパティへの参照を渡すことができる場合、ユーザーにコールバック関数を強制的に記述させないようにする方法があるかどうか疑問に思っています。

ありがとう！

4

1 に答える 1

2

これらのプロパティ名を分割できるメソッドが必要です。http://jsfiddle.net/mendesjuan/CUMgL/

var a = {
  b: {
    c: 2
  }
};

getProp(a, 'b.c') // returns 2


function ​getProp(obj, propName)​ {
    var parts = propName.split('.');

    for (var i=0; i < parts.length; i++) {
       obj = obj[parts[i]];
    }
    return obj;
}

プラグイン内で、次のことができます

// Assuming the value passed in is called "options"...
var caption = getProp( image, options.references.caption );

理想getPropもで動作しgetProp('a[b]')ますが、それは少し難しいので、必要に応じて実装できます。Ext-JSにはExt.data.reader.JsonReader、まさにそれを行うaと呼ばれるものがあり、インスピレーションとして使用できますhttp://docs.sencha.com/ext-js/4-0/source/Json2.html#Ext-data-reader-Json Lookメソッドの場合createAccessor

于 2012-04-06T16:21:28.450 に答える