jquery模板 - 導入文件？

我正在使用backbone.js，但據我所見，它並不關心你使用的模板系統。目前我正在嘗試mustache.js，但我對其他人開放。我有點惱火，雖然用的方式我已經把模板轉換成字符串：jquery模板 - 導入文件？

var context = { 
    name: this.model.get('name'), 
    email: this.model.get('email') 
} 

var template = "<form>Name<input name='name' type='text' value='{{name}}' />Email<input name='email' type='text' value='{{email}}' /></form>"; 

var html = Mustache.to_html(template, context); 
    $(this.el).html(html); 
    $('#app').html(this.el);

我想，如果我可以從不同的文件或東西莫名其妙地加載它。我希望能夠擁有模板文件以簡化事情。例如，如果我把它全部放在一個字符串中，我不會有中斷（我可以有html中斷，但這不是重點）。線路開始變長後，變得難以管理。

小貼士？

來源

2011-04-12 Matthew

你看着jquery.tmpl插件？ http://api.jquery.com/jquery.tmpl/ – Chandu 2011-04-12 18:35:05

更新（14年4月11日）：

如回答下面OP：

不幸的是，jQuery團隊已經移動模板的功能出來的jQuery核心。該代碼仍可作爲這裏的圖書：github.com/BorisMoore/jquery-tmpl這裏：github.com/borismoore/jsrender

原來的答案：

我只是用這幾個小時前： http://api.jquery.com/category/plugins/templates/

這是一個官方的jQuery插件（即開發人員認可它）。

這是你需要其他的比字符串，用於裝載模板從事物的功能：http://api.jquery.com/template/

這裏的代碼在HTML模板：

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <li>${Name}</li> 
</script> 
___________ 

// Compile the inline template as a named template 
$("#titleTemplate").template("summaryTemplate"); 

function renderList() { 
    // Render the movies data using the named template: "summaryTemplate" 
    $.tmpl("summaryTemplate", movies).appendTo("#moviesList"); 
}

很<script>標籤，因爲這在默認情況下是不可見的。
請注意type =「text/x-jquery-tmpl」。如果你忽略它，它會嘗試將其解析爲JavaScript（並且可怕地發生）。

另請注意，「從不同文件加載」與「讀取文件」基本相同，然後「從字符串加載」。

來源

2011-04-12 18:44:56 x10

這些鏈接現已停止。 – Bowersbros 2014-11-04 10:01:58

不幸的是，jQuery團隊已經將模板功能移出了jQuery Core。代碼仍然可以在這裏作爲庫：https：//github.com/BorisMoore/jquery-tmpl和在這裏：https://github.com/borismoore/jsrender – x10 2014-11-04 10:08:35

編輯

我剛剛發現這個jQuery插件 - http://markdalgleish.com/projects/tmpload/不正是你想要的東西，並能與$.tmpl

我已經建立了一個通過Ajax加載模板一個輕量級的模板經理耦合，它允許您將模板分爲更易於管理的模塊。它還執行簡單的內存緩存以防止不必要的HTTP請求。（我用過jQuery。阿賈克斯在這裏爲簡便起見）

var TEMPLATES = {}; 

var Template = { 

    load: function(url, fn) { 
    if(!TEMPLATES.hasOwnProperty(url)) { 
     $.ajax({ 
     url: url, 
     success: function(data) { 
      TEMPLATES[url] = data; 
      fn(data); 
     } 
     }); 
    } else { 
     fn(TEMPLATES[url]); 
    } 
    }, 

    render: function(tmpl, context) { 
    // Apply context to template string here 
    // using library such as underscore.js or mustache.js 
    } 

};

你會再使用此代碼如下所示，通過回調處理，模板數據：

Template.load('/path/to/template/file', function(tmpl) { 
    var output = Template.render(tmpl, { 'myVar': 'some value' }); 
});

來源

2011-04-12 18:47:21

我們正在使用jqote2與骨幹，因爲它比jQuery的速度更快，因爲你說有很多:)

我們有在一個單一的TPL文件的所有模板，我們結合我們的template_rendered因此我們可以添加jquery的事件等等等等

App.Helpers.Templates = function() { 

    var loaded = false; 
    var templates = {}; 

    function embed(template_id, parameters) { 
    return $.jqote(templates[template_id], parameters); 
    } 

    function render(template_id, element, parameters) { 
    var render_template = function(e) { 
     var r = embed(template_id, parameters); 
     $(element).html(r); 
     $(element).trigger("template_rendered"); 
     $(document).unbind(e); 
    }; 

    if (loaded) { 
     render_template(); 
    } else { 
     $(document).bind("templates_ready", render_template); 
    } 
    } 

    function load_templates() { 
    $.get('/javascripts/backbone/views/templates/templates.tpl', function(doc) { 
     var tpls = $(doc).filter('script'); 
     tpls.each(function() { 
     templates[this.id] = $.jqotec(this); 
     }); 
     loaded = true; 
     $(document).trigger("templates_ready"); 
    }); 
    } 

    load_templates(); 

    return { 
    render: render, 
    embed: embed 
    }; 

}();

它們看起來像

<script id="table" data-comment="generated!!!!! to change please change table.tpl"> 
<![CDATA[ 
]]> 
</script>

來源

2011-04-13 08:09:49

jquery模板 - 導入文件？

回答

相關問題