外部JSファイルの内容を含む

私はこのすべての間違いに近づいている可能性がありますので、フィードバックや提案は非常に高く評価されます。外部JSファイルの内容を含む

私は、ユーザーが独自のダッシュボードを作成できるjavascriptとjQueryを使用してツールを構築しています。ユーザーは、ダッシュボードに追加したいモジュールを選択して、適切に再配置することができます。

モジュールには、htmlテーブルや入力を許可して検索を実行することができます。

私の目標は、各モジュールを独自のJSファイルにして、ロジックを分離しておく必要があるときに簡単にデバッグできるようにすることでした。

これは、上記のコードは、ユーザが選択したモジュールを取り出し、私に向かって働いていたもの、具体的にgetScript

// Loop over our modules and create our output 
    for (var i = 0; i < moduleData.modules.length; i++){ 
     output += '<li data-sizey="'+moduleData.modules[i].sizeY+'" data-sizex="'+moduleData.modules[i].sizeX+'" data-col="'+moduleData.modules[i].col+'" data-row="'+moduleData.modules[i].row+'" data-min-sizey="'+moduleData.modules[i].minYsize+'" data-min-sizex="'+moduleData.modules[i].minXsize+'">'; 
      output += '<div class="portlet" >'; 
        output += '<div class="portlet-title">'; 
         output += '<div class="caption">'; 
           output += '<i class="'+moduleData.modules[i].moduleIcon+'"></i>'; 
           output += '<span class="caption-subject text-uppercase"> '+moduleData.modules[i].moduleName+'</span>'; 
           output += '<span class="caption-helper"> '+moduleData.modules[i].moduleDescription+'</span>'; 
         output += '</div>'; 
         output += '<div class="actions">'; 
           output += '<a class="btn" name="editModule" data-moduleid="'+moduleData.modules[i].moduleID+'"><i class="fa fa-pencil"></i>Edit</a>'; 
         output += '</div>'; 
        output += '</div>'; 
        output += '<div class="portlet-body">'; 
         $.getScript("includes/js/modules/"+moduleData.modules[i].moduleID+".js", function(data){ 
          output += data; 
         }); 
        output += '</div>'; 
      output += '</div>'; 
     output += '</li>'; 
    } 

    // Append our output 
    $('#moduleData').empty().append(output);

あります。実際のロジックがレンダリングされるモジュールblock/divを設定します。

私の目標は、取得しようとしていた個々のJSファイルの出力をそれらのモジュールに埋め込むことです。

モジュールをすべて別々のファイルとして保持する方法を試しながら、これを処理するためのより良い方法に関する提案があります（これがベストと思われます）。

出典

2016-07-01 SBB

あなたは間違いなく、HTMLとJavascriptを混在させることはできません。それを分離したままにしておきます。 –

おそらく、必要なすべてのJSファイルの代わりに配列を作成し、ループの後にロードするでしょうか？それから、各JSファイルに、データを追加するために必要なモジュールのIDを教えてください。 – SBB

代わりのmustacheテンプレートがあなたのために働く、と（あなたは多くのトラブルもなく、サーバからJSONファイルを取得することができます）それらをJSONオブジェクトを養う場合は、試してみてくださいの.jsファイルを送信しようとしています。

<table id="mustacheTable"> 
    {{#people}} 
     <tr> 
      <td>{{name}}</td> 
      <td>{{occupation}}</td> 
     </tr> 
    {{/people}} 
</table>

htmlファイル：

<body> 
    <p id="person"></p> 
</body>

JS Mainfile：

$(document).ready(function() { 
    $("#templates").load("template.html #mustacheTable", function() { 
     $("#person").html(createTable(view)); 

    }); 
});

私は

口ひげHTMLFILE（jquery.jsとmustache.jsを使用しています）小さな例を与えるでしょう別ファイルからのミスマッチロジック：

私が見た

function createTable() { 
    var template = document.getElementById('mustacheTable').innerHTML; 
    var output = "" 
    view.forEach(function (people) { 
     output += (Mustache.render(template, people)); 
    })  
    return output; 
}

// 編集後のご質問は、調整した：

あなたはダッシュボードで投げるために好きなモジュールのテンプレートを使用したいので、そのように、それはより多く使用することができますので、口ひげは、テンプレートを作成し、一度。すべてのモジュールを独自の.htmlファイルにすることができます。あなたは、必要な数のjavascriptファイルにmustachetemplatesで動作するロジックを配置することもできます。メインファイルで行ったようにアクセスしてください。

あなたは機能からJavaScriptファイルを取得したい場合は、この質問はあなたの問題をフィット： How do I include a JavaScript file in another JavaScript file?

出典

2016-07-01 07:15:23 Gammeldags

私はこれをサポートしています。 –

これらのテンプレートにはロジックが含まれていますか？これらのモジュールは、レンダリングされるHTMLだけでなく、電卓やタイマーなどの配列の配列でもあります。コンピュータや電話に追加できるウィジェットと同じように考えてください。 – SBB

ひげそりテンプレートは「論理なし」ですが、それらを使用する際にロジックを使用できます。あなたがしたいことは、どこかからピースを取り出して実行することだと思われます... 基本的に、javacodeを通してjavacodeを実行/補間したいとします。あなたはどんなコードを手に入れてもわかりません。 – Gammeldags

あなたは構造に問題がある場合。ボイラープレートを使用する必要があります。パターンは修正され、独自のフレームワークをカスタム化します。ファイル構造の設計は、あなたのロジックに完全に依存しています。 JavaScriptは手続き型言語なので、ファイル順序の定義は重要です。

あなたは勉強することがあります。https://github.com/jquery-boilerplate/jquery-boilerplate

出典

2016-07-01 07:12:09

これは質問には答えられません、そのような情報のためにコメントセクションを使用してください。 – brk

外部JSファイルの内容を含む

答えて

関連する問題