7

JSON オブジェクトを編集するためのインターフェースをユーザーに提供したいと考えています。

たとえば、次のオプションを使用して Google チャートを呼び出す JavaScript があります。

var options={
    chartType: "Pie",
    title:"Chart title",
    is3D:false,
    width:500,
    height:300,
};

理想的には、ユーザーがコードを調べなくてもオプションを自分で変更できるようにする必要があります。オブジェクトから自動的に構築された UI が表示されます。

  • chartType は選択 (Pie、Line、Bar) です
  • タイトルはテキスト入力です
  • is3Dはチェックボックスです
  • 等

このためのライブラリはありますか？そうでない場合、開始するための提案はありますか?

もちろん、手動でフォームを作成することもできますが、アイデアは、あらゆるオブジェクトに対して機能する一般的なソリューションを用意することです。

4

4 に答える 4

4

JSON を記述するための規則を含むこのリンクを見つけました: http://www.json-schema.org/

「JSON スキーマ」を検索すると、いくつかの解決策が見つかりました。特に、この投稿は次のとおりです。

プロパティ エクスプローラーのように機能する GUI ベースまたは Web ベースの JSON エディター

これは 2 年前に開始されましたが、明らかに十分に文書化され、最新の状態に保たれています。

また、IBM Web サイトの 2012 年 4 月の投稿:

http://www.ibm.com/developerworks/library/wa-jsonschema/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=040512

于 2012-04-19T15:02:13.990 に答える
1

問題

任意の JSON 構造を構築するユーザーフレンドリーな手段を提供する方法:

  • ユーザー インターフェイスは直感的で柔軟性があり、開発者レベルの技術的習熟度がなくても使用できます
  • ユーザー インターフェイスは、JSON の構造から推測できます。
  • ユーザー インターフェイスの変更には、開発者の介入がほとんどまたはまったく必要ありません
  • 基礎となる JSON 構造への変更は、対応するユーザー インターフェイスへの変更を自動的にトリガーできます。

解決

これが質問の基本的な前提である場合、このアプローチは、「MVVM」命名法（明らかに「MVC」ミームの変形）に基づくさまざまなアプローチのいずれかを使用して可能であるように見えます。

例

http://knockoutjs.com/examples/cartEditor.html http://en.wikipedia.org/wiki/Model_View_ViewModel#Open_source_MVVM_frameworks

関連項目

プロパティ エクスプローラーのように機能する GUI ベースまたは Web ベースの JSON エディター

于 2012-10-04T21:55:22.890 に答える
0

サービスのパラメーターを検出する Web フォームを記述します。パラメータを取得したら、使用可能なパラメータに基づいてフォームを生成します。フォームを送信し、JSON 結果を取得します。

于 2012-04-18T20:42:12.933 に答える
0

いいえ、フォームを自分で作成する必要があります。HTML フォームは、(リクエストの) プロパティの要件を記述するための手段に過ぎず、それらのシリアライゼーションは目的のオブジェクトを返すだけです。あなたの例では、それは

<select name="chartType"><option value="Pie"/><option value="Line" />...</select>
<input type="text" name="title" />
<input type="checkbox" name="is3D" />
<input type="number" name="width" />

フォームを使用すると、パターン、最小/最大値、デフォルト値、およびそのようなライブラリが処理するすべてのものを記述することもできます。シンプルなライブラリを見つけるかもしれません

{
    chartType: ["Pie", "Line", "Bar"],
    title:"string",
    is3D:"boolean",
    width:"number"
}

上記の html に追加し、クロスブラウザのシリアル化機能を提供しますが、より複雑になると (たとえば、「行」を事前に選択する、デフォルトのタイトルを付けるなど)、html (またはその js 表現) に戻ります。

于 2012-04-18T20:50:15.747 に答える