基于名称映射 HTML 表单的 JavaScript 模板引擎

Question

我正在使用主干 js 来处理我的视图和模型，但我希望在 ASP.NET MVC 中使用 Html.EditorFor 呈现模板。这是因为我的表单是基于 C# 类动态创建的。我只为 JavaScript 模板尝试过下划线，但它需要像 <%=heading%> 这样的值字段中的标记，这对我来说不是一个选项。我需要一个模板引擎，它可以使用每个表单组件的名称映射我的表单，或者如果有其他视图引擎可以呈现适用于服务器和 js 模板引擎的相同标记。

更新

在我看来，我正在像这样使用 Html.EditorFor：

@foreach (var type in Html.GetAvailablePageModels()) {
    var content = Activator.CreateInstance(type) as IContent;
    <script id="view-template-@type.Name" type="text/html">
        @using (Html.BeginForm()) {
            @Html.EditorFor(x => content)
            <input type="submit" value="Save"/>
        }
    </script>
}

然后在我的主干视图中，我正在做这样的事情：

var PageModel = Backbone.Model.extend({
    urlRoot: '/api/page'
});
var page = new PageModel({ id: 'articles/85' });
page.fetch();

var EditView = Backbone.View.extend({

    el: $('div#main'),

    initialize: function () {
        this.template = _.template($('#view-template-Article').html());
        this.render();
    },

    render: function () {
        $(this.el).html(this.template(this.model.toJSON())); // <-- set the values correct in my pre rendered form
        return this;
    }

});

window.editView = new EditView({ model: page });

在上面我将模型绑定到模板的代码中，我需要确保名为 header 的字段绑定到 name="heading" 的正确表单字段。

Answer 1

改变下划线模板的工作方式：

_.templateSettings = {
  interpolate : /\{\{([\s\S]+?)\}\}/g
};

现在你可以像这样编写 HTML 模板了：

This is a message: {{message}}

而不是老式的<%= message %> 风格。这将允许您从服务器上的 Razor 视图生成所需的模板。我曾经在一个项目中这样做过，效果非常好。