如何编写 jQuery 样式 ng-repeat

Question

我习惯于使用AngularJS进行数据绑定，并通过其指令将数据显示在前端。

本质上，我已经编写了一个jQuery函数来从.JSON 文件：

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        console.log(myItems);
    });
});

如何在<li>中重复 myItems 中的所有项目

用角度术语来说，它看起来像：

<ul>
    <li ng-repeat="address in myItems">
        {{ address.HouseNumber }}, {{ address.Street }}, {{ address.Postcode }}
    </li>
</ul>

如何在不需要使用 Angular 的情况下让它工作？

Answer 1

html：

<ul id="example">
</ul>

脚本：

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        $.each( myItems , function( index, address){
            $('#example').append('<li>'+ address.HouseNumber+', etc..' + '</li>');
        });
    });
});

Answer 2

我通常使用下划线模板来做类似的事情。 http://underscorejs.org/#template

Answer 3

看看一些JavaScript模板语言，如jTemplates或JsRender。

Answer 4

你的代码看起来像下面

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        var ulElement = $('<ul></ul>')
        $.each(myItems, function(index, value) {
            $('<li></li>').appendTo(ulElement).text(value.HouseNumber + ' '+ value.Street + ' ' + value.Postcode);
        })
        $('#mainDiv').append(ulElement);
    });
});