从json/js对象构建html的最佳实践？

-1

当我从API的Ajax响应，我得到一个硬JSON结构：从json/js对象构建html的最佳实践？

{ 
    object: { 
     key: value, 
     key: value, 
     .... 
     key(array_of_objects): { 
      key: value, 
      key: value, 
     }, { 
      key: value, 
      key: value, 
     }, { 
      key: value, 
      key: value, 
     } 
    } 

}

现在我做：

function render(json) { 
    var data = $.parseJSON(json); 
    var html = ""; 

    html += "<h1>Hello"+data.key+"</h1>"; 
    html += "<h2>Your data:</h2>"; 
    html += "<ul>"; 

    var data_array= ""; 

    $.each(data.array_of_objects, function(index, val) { 
    data_array += "<li>" + val.key + "</li>"; 
    }); 

    html += data_array+"<ul>" 

    return html; 
} 

$.ajax({ 
    type: "POST", 
    url: apiUrl, 
    data: request, 
    success: function(obj, xr, res) { 
     $(".content").append(render(obj)); 
    } 
})

我知道，我用坏的解决方案，因为我的代码很纠结并且难以扩展。

而我想分开js逻辑和html视图。

这种情况的最佳实践解决方案是什么？

来源

2015-05-10 MAG-FRAG

最佳实践的解决方案是使用的模板引擎之一。例如http://handlebarsjs.com/或http://underscorejs.org/。这使您可以将您从js代码中分离出来。 –

如果您在应用程序中多次执行此操作，我会说继续使用胡子或把手。您的html始终会与您的API响应数据耦合，但这种方式可以保证模板的可维护性和可重用性。 – prodigitalson

您正在寻找一个客户端库。他们很多很多样化。其中一个小改进就是backbone.js，它将为您提供组件，您可以（重新）呈现并模拟保留数据。另一个是广泛流行的angular.js和原因有反应。

如果不使用任何这些，那么做你正在做的事实际上很常见。您也可以尝试去用一个简约模板引擎就像玉或下划线的模板，你的情况

来源

2015-05-10 20:55:17

从json/js对象构建html的最佳实践？

回答

相关问题