เทมเพลตภายนอกในเครื่องหมายขีดล่าง

ฉันใช้แม่แบบขีดล่าง เป็นไปได้ที่จะแนบไฟล์ภายนอกเป็นเทมเพลต ?

ใน Backbone View ฉันมี:

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

ใน html ของฉันคือ:

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

มันทำงานได้ดี แต่ฉันต้องการแม่แบบภายนอก ฉันลอง:

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

หรือ

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

หรือ

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

แต่มันไม่ได้ผล

แก้ไข: คำตอบนี้เก่าและล้าสมัย ฉันจะลบออก แต่เป็นคำตอบที่ "ยอมรับ" ฉันจะฉีดความคิดเห็นแทน

ฉันจะไม่สนับสนุนให้ทำเช่นนี้อีกต่อไป แต่ฉันจะแยกเทมเพลตทั้งหมดออกเป็นไฟล์ HTML แต่ละไฟล์ บางคนจะแนะนำให้โหลดแบบอะซิงโครนัสเหล่านี้ (Require.js หรือเทมเพลตแคชประเภทต่างๆ) ทำงานได้ดีกับโครงการขนาดเล็ก แต่ในโครงการขนาดใหญ่ที่มีเทมเพลตจำนวนมากคุณพบว่าตัวเองสร้างคำขอ async ขนาดเล็กจำนวนมากในการโหลดหน้าเว็บซึ่งฉันไม่ชอบจริงๆ (เอ่อ ... ตกลงคุณสามารถแก้ไขได้ด้วย Require.js โดยการรวบรวมการอ้างอิงเริ่มต้นของคุณล่วงหน้าด้วย r.js แต่สำหรับเทมเพลตฉันยังรู้สึกผิดอยู่)

ฉันชอบใช้งานฮึดฮัด (grunt-Contrib-jst) เพื่อรวบรวมเทมเพลต HTML ทั้งหมดไว้ในไฟล์ template.js ไฟล์เดียวและรวมไว้ด้วย คุณจะได้รับสิ่งที่ดีที่สุดจาก IMO ของโลกทั้งหมด ... เทมเพลตอยู่ในไฟล์การรวบรวมเทมเพลตดังกล่าวเกิดขึ้นในเวลาสร้าง (ไม่ใช่รันไทม์) และคุณไม่มีคำขอ async เล็ก ๆ หนึ่งร้อยรายการเมื่อหน้าเริ่มต้นขึ้น

ทุกอย่างด้านล่างเป็นขยะ

สำหรับฉันฉันชอบความเรียบง่ายในการรวมไฟล์ JS เข้ากับเทมเพลตของฉัน ดังนั้นฉันอาจสร้างไฟล์ชื่อ view_template.js ซึ่งมีเทมเพลตเป็นตัวแปร:

app.templates.view = " \
    <h3>something code</h3> \
";

จากนั้นก็ทำได้ง่ายเพียงแค่รวมไฟล์สคริปต์เหมือนไฟล์ปกติแล้วใช้ในมุมมองของคุณ:

template: _.template(app.templates.view)

ก้าวไปอีกขั้นฉันใช้กาแฟจริง ๆดังนั้นรหัสของฉันจึงมีลักษณะเช่นนี้มากขึ้นและหลีกเลี่ยงอักขระหนีท้ายบรรทัด:

app.templates.view = '''
    <h3>something code</h3>
'''

การใช้แนวทางนี้จะหลีกเลี่ยงการเชื่อมโยงใน require.js โดยที่มันไม่จำเป็นจริงๆ

นี่คือวิธีง่ายๆ:

var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = '/static/templates';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType: 'html', //** Must add 
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}

การใช้ "async: false" ที่นี่ไม่ใช่วิธีที่ไม่ดีเพราะไม่ว่าในกรณีใดคุณต้องรอจนกว่าเทมเพลตจะโหลด

ดังนั้นฟังก์ชัน "render"

1. ช่วยให้คุณจัดเก็บแต่ละแม่แบบในไฟล์ html แยกกันใน dir แบบคงที่
2. มีน้ำหนักเบามาก
3. รวบรวมและแคชเทมเพลต
4. ตรรกะการโหลดเทมเพลตบทคัดย่อ ตัวอย่างเช่นในอนาคตคุณสามารถใช้เทมเพลตที่โหลดไว้ล่วงหน้าและที่คอมไพล์ไว้ล่วงหน้าได้
5. ใช้งานง่าย

[ฉันกำลังแก้ไขคำตอบแทนที่จะแสดงความคิดเห็นเพราะฉันเชื่อว่านี่สำคัญ]

หากเทมเพลตไม่ปรากฏในแอปเนทีฟและคุณเห็นHIERARCHY_REQUEST_ERROR: DOM Exception 3ให้ดูที่คำตอบของ Dave Robinson ว่า What สามารถทำให้เกิด "HIERARCHY_REQUEST_ERR: DOM Exception 3" - ข้อผิดพลาด? .

โดยทั่วไปคุณต้องเพิ่ม

dataType: 'html'

ตามคำขอ $ .ajax

การมิกซ์อินนี้ช่วยให้คุณสามารถแสดงเทมเพลตภายนอกโดยใช้ขีด_.templateFromUrl(url, [data], [settings])ล่างในวิธีที่ง่ายมาก: วิธี API เป็นเกือบเหมือนเน้นของ _.template () รวมแคช

_.mixin({templateFromUrl: function (url, data, settings) {
    var templateHtml = "";
    this.cache = this.cache || {};

    if (this.cache[url]) {
        templateHtml = this.cache[url];
    } else {
        $.ajax({
            url: url,
            method: "GET",
            async: false,
            success: function(data) {
                templateHtml = data;
            }
        });

        this.cache[url] = templateHtml;
    }

    return _.template(templateHtml, data, settings);
}});

การใช้งาน:

var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});

ฉันไม่ต้องการใช้ require.js สำหรับงานง่ายๆนี้ดังนั้นฉันจึงใช้โซลูชันของ koorchik ที่แก้ไขแล้ว

function require_template(templateName, cb) {
    var template = $('#template_' + templateName);
    if (template.length === 0) {
        var tmpl_dir = './templates';
        var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
        var tmpl_string = '';

        $.ajax({
            url: tmpl_url,
            method: 'GET',
            contentType: 'text',
            complete: function (data, text) {
                tmpl_string = data.responseText;
                $('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
                if (typeof cb === 'function')
                    cb('tmpl_added');
            }
        });
    } else {
        callback('tmpl_already_exists');
    }
}

require_template('a', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'a' rendering
    }
});
require_template('b', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'b' rendering
    }
});

เหตุใดจึงต้องผนวกเทมเพลตลงในเอกสารแทนที่จะเก็บไว้ในวัตถุจาวาสคริปต์ เนื่องจากในเวอร์ชันที่ใช้งานจริงฉันต้องการสร้างไฟล์ html ที่มีเทมเพลตทั้งหมดอยู่แล้วดังนั้นฉันจึงไม่จำเป็นต้องขอ ajax เพิ่มเติม และในเวลาเดียวกันฉันไม่จำเป็นต้องทำการ refactoring ใด ๆ ในรหัสของฉันเหมือนที่ฉันใช้

this.template = _.template($('#template_name').html());

ในมุมมอง Backbone ของฉัน

สิ่งนี้อาจจะไม่ตรงประเด็นเล็กน้อย แต่คุณสามารถใช้ Grunt (http://gruntjs.com/) ซึ่งทำงานบน node.js (http://nodejs.org/ ซึ่งมีให้สำหรับแพลตฟอร์มหลักทั้งหมด) เพื่อเรียกใช้งานจาก บรรทัดคำสั่ง. มีพวงของปลั๊กอินสำหรับเครื่องมือนี้เหมือนคอมไพเลอร์แม่แบบhttps://npmjs.org/package/grunt-contrib-jst ดูเอกสารบน GitHub, https://github.com/gruntjs/grunt-contrib-jst (คุณจะต้องเข้าใจวิธีเรียกใช้ node package manager https://npmjs.org/ไม่ต้องกังวลมันง่ายและหลากหลายอย่างไม่น่าเชื่อ)

จากนั้นคุณสามารถเก็บเทมเพลตทั้งหมดของคุณไว้ในไฟล์ html แยกจากกันเรียกใช้เครื่องมือเพื่อคอมไพล์ล่วงหน้าทั้งหมดโดยใช้ขีดล่าง (ซึ่งฉันเชื่อว่าเป็นการพึ่งพาสำหรับปลั๊กอิน JST แต่ไม่ต้องกังวลตัวจัดการแพ็คเกจโหนดจะติดตั้งการอ้างอิงให้คุณโดยอัตโนมัติ)

สิ่งนี้รวบรวมเทมเพลตทั้งหมดของคุณไว้ในสคริปต์เดียวพูด

templates.js

การโหลดสคริปต์จะตั้งค่าโกลบอล - "JST" ตามค่าเริ่มต้นซึ่งเป็นอาร์เรย์ของฟังก์ชันและสามารถเข้าถึงได้ดังนี้:

JST['templates/listView.html']()

ซึ่งจะคล้ายกับ

_.template( $('#selector-to-your-script-template'))

หากคุณใส่เนื้อหาของแท็กสคริปต์นั้นใน (template /) listView.html

อย่างไรก็ตามนักเตะที่แท้จริงคือ: Grunt มาพร้อมกับงานนี้ที่เรียกว่า 'watch' ซึ่งโดยทั่วไปจะตรวจสอบการเปลี่ยนแปลงของไฟล์ที่คุณกำหนดไว้ในไฟล์ grunt.js ในเครื่องของคุณ (ซึ่งโดยพื้นฐานแล้วเป็นไฟล์กำหนดค่าสำหรับโครงการ Grunt ของคุณในจาวาสคริปต์ ) หากคุณไม่พอใจให้เริ่มงานนี้ให้คุณโดยพิมพ์:

grunt watch

จากบรรทัดคำสั่ง Grunt จะตรวจสอบการเปลี่ยนแปลงทั้งหมดที่คุณทำกับไฟล์และเรียกใช้งานทั้งหมดที่คุณได้ตั้งค่าไว้ในไฟล์ grunt.js นั้นโดยอัตโนมัติหากตรวจพบการเปลี่ยนแปลงเช่นงานjst ที่อธิบายไว้ข้างต้น แก้ไขแล้วบันทึกไฟล์ของคุณจากนั้นเทมเพลตทั้งหมดของคุณจะคอมไพล์ใหม่เป็นไฟล์ js เดียวแม้ว่าจะกระจายออกไปในไดเร็กทอรีและไดเร็กทอรีย่อยต่างๆ

งานที่คล้ายกันนี้สามารถกำหนดค่าสำหรับการทับจาวาสคริปต์ของคุณการเรียกใช้การทดสอบการเชื่อมต่อและการย่อ / ขยายไฟล์สคริปต์ของคุณ และทั้งหมดนี้สามารถเชื่อมโยงกับงานของนาฬิกาได้ดังนั้นการเปลี่ยนแปลงไฟล์ของคุณจะทำให้เกิดการสร้าง "สร้าง" ใหม่ของโครงการ

ต้องใช้เวลาพอสมควรในการตั้งค่าและทำความเข้าใจวิธีกำหนดค่าไฟล์ grunt.js แต่ก็คุ้มค่ากับเวลาที่ลงทุนไปและฉันไม่คิดว่าคุณจะกลับไปใช้วิธีการทำงานแบบ pre-grunt

ฉันคิดว่านี่คือสิ่งที่อาจช่วยคุณได้ ทุกอย่างในโซลูชันหมุนรอบrequire.jsไลบรารีซึ่งเป็นไฟล์ JavaScript และตัวโหลดโมดูล

บทช่วยสอนที่ลิงค์ด้านบนแสดงให้เห็นอย่างชัดเจนว่าสามารถจัดระเบียบโครงการกระดูกสันหลังได้อย่างไร นอกจากนี้ยังมีตัวอย่างการใช้งาน หวังว่านี่จะช่วยได้

ฉันสนใจเกี่ยวกับเทมเพลตจาวาสคริปต์และตอนนี้ฉันกำลังทำขั้นตอนแรกกับกระดูกสันหลัง นี่คือสิ่งที่ฉันคิดขึ้นมาและดูเหมือนว่าจะทำงานได้ดี

window.App = {

    get : function(url) {
        var data = "<h1> failed to load url : " + url + "</h1>";
        $.ajax({
            async: false,
            url: url,
            success: function(response) {
                data = response;
            }
        });
        return data;
    }
}

App.ChromeView = Backbone.View.extend({
    template: _.template( App.get("tpl/chrome.html") ),
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
});

App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();

ฉันต้องตั้งค่าประเภทข้อมูลเป็น "ข้อความ" เพื่อให้ใช้งานได้:

get : function(url) {
    var data = "<h1> failed to load url : " + url + "</h1>";
    $.ajax({
        async: false,
        dataType: "text",
        url: url,
        success: function(response) {
            data = response;
        }
    });
    return data;
}

ฉันพบวิธีแก้ปัญหาที่เหมาะกับฉันเมื่อใช้ jQuery

ฉันเพิ่มรหัสเทมเพลตขีดล่างด้วยวิธี jQuery.load () ลงในไฟล์ html หลัก

เมื่อมีแล้วฉันจะใช้มันเพื่อสร้างเทมเพลต ทั้งหมดต้องเกิดขึ้นพร้อมกัน!

แนวคิดคือ:

ฉันมีรหัสเทมเพลตแผนที่ขีดล่าง:

<!-- MAP TEMPLATE-->
<script type="text/template" id="game-map-template">
    <% _.each(rc, function(rowItem, index){ %>
      <ul class="map-row" data-row="<%- index %>">
        <li class="map-col <%- colItem.areaType ? 'active-area' : '' %>"></li>
        ...
</script>

และฉันใส่รหัสนั้นในไฟล์ชื่อmap-template.html

หลังจากนั้นฉันสร้าง a wrapper สำหรับไฟล์เทมเพลต

<div id="templatesPool"></div>

จากนั้นฉันรวมไฟล์นั้นไว้ในไฟล์ html หลักของฉันเช่นนั้น

ในหัว:

<!-- Template Loader -->
<script> 
    $(function(){
      $("#templatesPool").append($('<div>').load("map-template.html")); 
    });
</script> 

ไชโย

ฉันรู้ว่าคำถามนี้เก่ามาก แต่เกิดขึ้นเป็นผลลัพธ์แรกในการค้นหาโดย Google สำหรับเทมเพลต ajax ที่ขีดล่าง

ฉันเบื่อที่จะหาทางออกที่ดีไม่ได้ดังนั้นฉันจึงสร้างของตัวเองขึ้นมา:

https://github.com/ziad-saab/underscore-async-templates

นอกเหนือจากการโหลดเทมเพลตขีดล่างโดยใช้ AJAX แล้วยังเพิ่มฟังก์ชัน <% include%> ฉันหวังว่ามันจะมีประโยชน์กับใครบางคน

ฉันไม่สบายใจเล็กน้อยที่บังคับให้ jQuery ทำงานพร้อมกันดังนั้นฉันจึงแก้ไขตัวอย่างซิงโครนัสก่อนหน้านี้โดยใช้สัญญา ค่อนข้างเหมือนกัน แต่ทำงานแบบอะซิงโครนัส ฉันใช้เทมเพลต hbs ในตัวอย่างนี้:

var asyncRenderHbs= function(template_name, template_data) {
    if (!asyncRenderHbs.template_cache) { 
        asyncRenderHbs.template_cache= {};
    }

    var promise= undefined;

    if (!asyncRenderHbs.template_cache[template_name]) {
        promise= new Promise(function(resolve, reject) {
            var template_url= '/templates/' + template_name;
            $.ajax({
                url: template_url,
                method: 'GET',
                success: function(data) {
                    asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
                    resolve(asyncRenderHbs.template_cache[template_name](template_data));
                },
                error: function(err, message) {
                    reject(err);
                }           
            });
        });
    } else {
        promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
    }

    return promise;
};

จากนั้นใช้ html ที่แสดงผล:

asyncRenderHbs('some_template.hbs', context)
    .then(function(html) {
        applicationMain.append(html);
        // Do other stuff here after html is rendered...
    })
    .catch(function(err) {
        // Handle errors
    });

หมายเหตุ: ตามที่ผู้อื่นกล่าวไว้จะเป็นการดีกว่าที่จะรวบรวมเทมเพลตทั้งหมดไว้ในไฟล์ template.js เดียวและโหลดในตอนเริ่มต้นแทนที่จะมีการเรียกใช้ AJAX แบบซิงโครนัสขนาดเล็กจำนวนมากเพื่อรับเทมเพลตเมื่อโหลดหน้าเว็บ

คำเตือนไปข้างหน้า - นี่คือมังกร:

ฉันพูดถึงวิธีการที่แสดงด้านล่างเพื่อช่วยให้ผู้ที่ดิ้นรนเพื่อให้ ASP.NET stacks (และเฟรมเวิร์กที่คล้ายกัน) ทำงานได้อย่างกลมกลืนกับระบบนิเวศของ js-libs มันไปโดยไม่บอกว่านี่ไม่ใช่วิธีแก้ปัญหาทั่วไป ต้องบอกว่า ...

/ endforwardwarning

หากคุณใช้ ASP.NET คุณสามารถภายนอกเทมเพลตของคุณได้ง่ายๆโดยวางไว้ในมุมมองบางส่วนของตนเอง aka ใน. cshtml ของคุณ:

  @Html.Partial("path/to/template")

ภายใน template.cshtml ของคุณ:

   // this is razorview and thusly if you ever need to use the @ character in here  
   // you will have to either escape it as @@ or use the html codepoint which is &#64
   // http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
   <script type="text/x-template" id="someId">
        <span class="foo"><%= name %></span>
   </script>

และตอนนี้คุณสามารถใช้เทมเพลตได้ตามปกติ:

  _.template($("#someId").html())({ name: "Foobar" });

หวังว่าแนวทางที่ชัดเจนนี้จะช่วยให้ใครบางคนประหยัดค่าใช้จ่ายในการเกาศีรษะได้หนึ่งชั่วโมง