0

いくつかのコンポーネントdivを含むコンテナーで構成されたページがあります。マークアップ（スイートのタイプとバージョン）にはこれらのコンテナーが数十あり、ユーザーが選択ボックスを介して行った選択に基づいて、適切なコンテナーを表示/非表示にします。

コンポーネントdivの内容は変更されますが、HTMLマークアップは基本的に同じです。

コンポーネントのHTMLフレームワークは次のとおりです。

<div class="docs basicEdition720">  // 2nd class here is the suite type/version
  <div class="component" title=" /* component title here */ ">
    <p class="componentName"> /*component name here */ </p>
    <p class="componentType"> /*component type here */ </p>
    <p class="links"> /*component links here */ </p>
  </div>
</div>

ここでのポイントは、「whizbang」コンポーネントがあり、複数の異なるコンテナーで発生する可能性があり、コンテナーのバージョンが同じである限り、まったく同じコンテンツになる可能性があるということです。コンテナのバージョンが変更された場合、通常、whizbangコンポーネントの変更はリンクのみです。

たとえば、Basic Edition 720スイートのタイプとバージョンでは、whizbangコンポーネントの内容は、 EnterpriseEdition720スイートのwhizbangコンポーネントとまったく同じになります。

関係：

タイトル/名前

コンポーネントのタイトルと名前は、バージョンに基づいて変更されることはありません。それらは具体的に相互に直接相関しています。'A'の場合、'B'。

タイプ

コンポーネントタイプは、使用しているコンポーネント名のVERSIONに基づいて変更されることがあります。「bojangle」コンポーネントは、7.2.0の場合は「admin」タイプの場合がありますが、バージョン7.0.4の場合は「user」タイプの場合があります。'A'および'1'の場合、'B'。'A'および'2'の場合、'C'。

「ガジェット」コンポーネントには常に「参照」タイプがあるように、タイプが名前と具体的に相関している場合があります。

リンク

リンクは、コンポーネントのバージョンに基づいて常に変更されます。

目的：

さまざまなコンポーネントバージョンのリンクをドキュメント内で1回だけ更新したいのですが、現在行っているのは1ダースほどではありません。

既知のスイートのタイプとバージョンに基づいて、JavaScriptでコンテナーを自動的に解き放ちたいのですが。次のように、どのコンポーネントがどこに属しているかを知るためのフレームワークを与えることができます。

<div class="docs basicEdition720">  // Here we have the basic edition of the
  <div class="comp gadget">         // suite, version 7.2.0. That means I know 
  <div class="comp bojangle">       // we have the gadget, bojangle, widget, 
  <div class="comp widget">         // and gizmo components.
  <div class="comp gizmo">
</div>

<div class="docs basicEdition704">  // Now we have the basic edition suite, 
  <div class="comp gadget">         // version 7.0.4. Knowing that, I know we 
  <div class="comp gizmo">          // only have the gadget, gizmo,and whatsit
  <div class="comp whatsit">        // components.
</div>

<div class="docs enterpriseEdition720">  // Now we have the enterprise edition
  <div class="comp gadget">              // suite, version 7.2.0. Hey, looks 
  <div class="comp bojangle">            // pretty much the same as the basic 
  <div class="comp widget">              // edition of the same version...
  <div class="comp gizmo">
</div>

<div class="docs enterpriseEdition704">  // Ditto for enterprise suite v7.0.4.
  <div class="comp gadget">
  <div class="comp gizmo">
  <div class="comp whatsit">
</div>

/* more suites and versions */

または、すべてJSでバージョン管理を処理する方がよい場合は、それでも問題ありません。

私は自分の目的を達成できないほど多くの基本的なJSを作成しましたが、JSが非常に悪いので、どんな種類のヘッドスタート/jsFiddleも提供することを躊躇します。基本的には、HTMLフレームワークを使用し、変数とそれが含まれていることがわかっているスイートのバージョンに基づいてギャップを埋める必要があります。

これまで私は次のようなものを使用してきました

var gadgetName = " long name here ";
var bojangleName = " long name here ";
var gadgetLink720 = " version 720 link here";
var bojangleLink720 = " version 720 link here";
var gadgetTitle = " Gadget is a thingie that does...";
var bojangleTitle = " Bojangle is this thing that does...";

$(this).html("<div class=\"component\" title=\"" + myTitle + "\">\
    <p class=\"componentName\">" + myName +"</p>\
    <p class=\"componentType\">Setup Guide</p>\
    <p class=\"links\"><a href=\"\" class=\"html\">HTML</a> <a href=\"\" class=\"pdf\">PDF</a></p>\
  </div>");
});

しかし、かなり失敗しています。注：これは私が達成したことの最良の例ではありません。実際に（ある時点で）親divクラスが何を読んで、自動的にスローインするバージョンを知っているかなどを確認しました。

TL; DR

「WTFの男？！これは巨大なことです！あなたは醜いのと同じくらい愚かです。」

ごめんなさい。それ以上に簡潔にできるかどうかはわかりません。TL; DRは次のとおりです。「機能するページがありますが、同じコンテンツを何度も再利用しています。新しいリリースがあるたびに、数十のリンクを手動で更新する必要があります。単一ソースソリューションのスクリプトを作成する代わりに、peon。無視してください。」

:-(

4

2 に答える 2

2

口ひげはこれで最高のフレームワークの1つです

ここでデモを確認できます

于 2013-01-16T22:16:31.393 に答える
1

ハンドルバーがこれを行います。基本的な考え方は、次のようなテンプレートを使用してJavaScript変数をHTMLDOMに置き換えることができるということです。

<p>{{hello}}</p>

また、基本的なループとロジックも可能です。

あなたの質問へのフィドルはここにあります：http：//jsfiddle.net/Yk43x/

バインディングを含む（JavaScriptモデルと同じようにテンプレートが更新される）より複雑なテンプレートについては、Knockoutをお勧めします。ハンドルバーを使用するEmberJSとGoogleAngularは、テンプレート（およびバインディング）などを可能にします。

于 2013-01-16T22:34:34.087 に答える