c# - 如何在 UWP/UAP 上实现模板

Question

我需要根据 UWP/UAP 项目中的某些模型生成 HTML - 完全用 C# 编写。

问题是没有任何预先存在的模板引擎(我真的不想从头开始编写一个)与该平台兼容。我查找了一些最流行的替代方案，但没有一个是开箱即用的。

对于我面临的这个实质性问题，您建议的解决方案是什么？我考虑过移植一个可用的开源库，但我不确定这是否值得付出努力。

我对固执己见的答案或模板引擎的建议(实际上在 UAP 上不起作用)不感兴趣，只对解决 Windows 10 通用应用程序中的模板问题的最简单途径感兴趣。

Answer 1

如果您正在使用 HTML/JavaScript 进行开发，则可以使用内置的 WinJS 库在 HTML 中进行模板化。 Microsoft还创建了许多adapters让 Angular、React 或 Knockout 在 UWP 应用中使用它们。

通常，大多数 JavaScript 代码应该可以正常工作，您唯一应该考虑的是 security limitations嵌入 iframe 或外部脚本时。要绕过此类限制，您应该更新所用库的逻辑或使用 execUnsafeLocalFunction 方法手动强制执行。

MSApp.execUnsafeLocalFunction(function() {
    var body = document.getElementsByTagName('body')[0];
    body.innerHTML = '<div style="color:' + textColor + '">example</div>';
});

== 更新:

对于 C# 有两个选项:

1. 继续寻找库或自行插入进行此类转换，或者
2. 围绕 webview 控件构建一个包装器，它将使用现有的库为您完成此操作。

在第二种情况下应该很简单: 1) 您应该使用您在 JavaScript 中选择的任何库实现从 JSON 到 HTML(带模板)的转换器，它应该可用于从外部上下文(全局函数或对象)调用。此类函数应接收 JSON 字符串形式的数据并返回字符串(例如，来自innerHTML)。 2) 使用标准技术与 WebView 控件的 InvokeScriptAsync/ScriptNotify 事件在 C# 和 JS 环境之间传输数据。您实际上不需要在页面内显示 WebView。只需将其用作 JS 执行环境，并访问 DOM，相应的库需要。

这里是 WinJS 的代码示例: HTML/JS。 template.html 文件与 WinJS 库。全局 js 函数:

function convertFromJSON2HTML(jsonString, templateHTML) {
    var templateEl = document.createElement("div");
    templateEl.innerHTML = templateHTML;

    var jsonData = JSON.parse(jsonString);

    if (WinJS != undefined) {
        var template = new WinJS.Binding.Template(templateEl);

        //promise
        template.render(jsonData).done(function(output) {
            window.external.notify(output.innerHTML);
        });
    } else {
           // catch error
    }
}

C# 代码

public async Task<string> GenerateTemplate(string jsonData, string template)
{
    var webView = new WebView();
    webView.Source = new Uri("ms-appx-web:///HTML/template.html");

    webView.DOMContentLoaded += async (o, e) =>
    {
        await webView.InvokeScriptAsync("convertFromJSON2HTML", new string[] { jsonData, template });
    };            

    string output = "";

    // Simple trick to convert event result to async result
    TaskCompletionSource<bool> tcs = new TaskCompletionSource<bool>();
    webView.ScriptNotify += (o, e) =>
    {
        output = e.Value;
        tcs.SetResult(true);
    };
    await tcs.Task;
    return output;
}

用法。我在这里使用 WinJS 样式的模板:

var result = await GenerateTemplate("{\"x\":\"test\"}","<p data-win-bind='textContent:x'></p>");
resultBox.Text = result;

此外，为了简化通信，我建议使用 AddAllowedWebObject 方法在两个环境之间传递 WinRT 对象，而不仅仅是文本。