[英]Is it possible to render dust.js templates synchronously?
我正在嘗試為客戶端HTML / JS模板系統編寫一個適配器,以便在引擎蓋下使用dust.js。 不幸的是,API期望渲染操作同步發生:渲染輸出應該從render()調用返回。 Dust.js是異步的,並將渲染輸出傳遞給回調函數。 有沒有辦法解決這個問題,無論是在Dust API還是通過一些瘋狂的Javascript黑客攻擊?
DustJS只會在需要渲染的資源(模板,部分)尚未加載時異步執行。
如果在執行該模板之前加載了模板的所有依賴項,那么它將同步執行(據我所知,無論如何)。 所以你可以這樣做:
var result;
dust.render("tpl", data, function(err, res) {
result = res;
});
console.log(result); // result will actually already be filled out if dustjs didn't
// have to go look for resources somewhere.
下面是一個更全面的例子:(這里是一個jsfiddle鏈接,所以你可以運行它: http : //jsfiddle.net/uzTrv/1/ )
<script type="text/javascript" src="dust.js"></script>
<script>
var tpl = dust.compile("Omg {#people} {.} {/people} are here! {>partial/}", "tpl");
var partial = dust.compile("I'm a partial but I've already been included so things still run {how}", "partial");
dust.loadSource(tpl);
dust.loadSource(partial);
var data = {
people: ["jim", "jane", "jack", "julie"],
how: "synchronously!"
};
var result;
dust.render("tpl", data, function(err, res) {
result = res;
});
console.log(result);
</script>
可能有些情況(除了我提到的那個)我錯了......我不知道關於dustjs的一切。
我也想要一個接受上下文並返回灰塵渲染文本的函數。 這是我提出的解決方案:
// This function sets up dust template, and returns a new function "dusterFn()"
// dusterFn() can be passed a Context, and will return the rendered text.
// @param {String} text: The template text.
// @param {String} [name]: The name of the template to register with dust. If none is provided, a random number is used.
// @param {Function} [onError]: A function that is called if an error occurs during rendering.
function getDusterFn(text, name, onError) {
var dusterFn = null;
name = name || Math.floor(Math.random() * 99999).toString();
onError = onError || function (error) { };
try {
var compiled = dust.compile(text, name)
dust.loadSource(compiled);
dusterFn = function (context) {
var dustOutput = '';
dust.render(name, context, function (error, out) {
if (error) onError(error);
dustOutput = out;
});
return dustOutput;
};
} catch (e) {
// invalid template syntax
e += "\n\nPlease check your template syntax.";
throw (e);
}
return dusterFn;
}
用法
var greetingTemplate = getDusterFn('Hello {name}, You are {age} years old!');
greetingTemplate({name: 'Jane', age: 24});
Matt的解決方案給了我一些關於如何編寫一個隱藏其解決方案“丑陋”的小包裝器的指針(“丑陋”我的意思是在回調之外聲明變量,在回調中分配值並返回外部回調)。
它不僅將hack包裝成一個小函數,還綁定了模板的名稱。 我覺得這很有幫助,因為我發現自己一遍又一遍地使用相同的渲染功能,但我不想每次都指定模板的名稱。
function templates(template) {
return function templatesWrapper(data) {
var result;
dust.render(template, data, function onRender(err, data) {
if (err) {
throw err;
}
result = data;
});
return result;
}
}
這是如何使用它:
var renderHello = templates('hello.html');
renderHello({ username: 'Stackoverflow' });
// => <h1>Hello, Stackoverflow</h1>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.