Усы JS Шаблон с JSON Collection

Привет это моя первая попытка использовать MustacheJS с WebService JSON в .netУсы JS Шаблон с JSON Collection

В настоящее время я борюсь, я не могу найти то, что я делаю неправильные настройки этот простой пример:

Мой Webservice является returing следующей строки:

[ 
    { 
    "ShortDescription":"BOX", 
    "Description":"BOXING", 
    "Id":1 
    }, 
    { 
    "ShortDescription":"EPL", 
    "Description":"ENGLISH PREMIER LEAGUE", 
    "Id":2 
    } 
]

Я утвердивший его синтаксиса с этим сайтом: http://json.parser.online.fr/

и вот HTML код, я использую:

google.load("jquery", "1"); 
google.setOnLoadCallback(function() { 
    $(document).ready(
     function() { 

      $.ajax({ 
       url: "../data.asmx/geteagues", 
       type: "POST", 
       dataType: "json", 
       data: "", 
       contentType: "application/json; charset=utf-8", 
       success: function (data) { 
        var template = "<h1>{{ShortDescription}} {{Description}}</h1>"; 
        var html = Mustache.render(template, data); 
        $('#sampleArea').html(html); 
        alert(html); 
       } 
      }) 

     } 
    ) 
});

Я отправляю весь код JS, так как я не очень хорошо с JavaScript, в основном я хочу, чтобы загрузить всегда последнюю версию JQuery от Google, а затем работать мой вызов WS.

Проблема до сих пор является то, что, когда я устанавливаю точку останова в следующей строке:

var html = Mustache.render(template, data);

Я вижу, что шаблон SETN нормально, и так же данные, то же значение, как я писал выше, но функция .render возвращается:

Кажется, мне не нравились данные.

До сих пор все примеры, которые я видел, для встроенных данных приходят в виде следующей структуры:

{ 
    "repo": [ 
    { "name": "resque" }, 
    { "name": "hub" }, 
    { "name": "rip" }, 
    ] 
}

а затем шаблон определен следующим образом:

{{#repo}} 
    <b>{{name}}</b> 
{{/repo}}

Но единственной разницей, что против мои данные таковы, что у меня нет «родительского» типа «репо»

На стороне сервера я использую библиотеку .net под названием JSON.net и в документации о том, как собираются коллекции erialized:

james.newtonking.com/projects/json/help/html/SerializingCollections.htm

конечный результат не включает в себя имя родительского узла, который я, что не хватает моего Усы определения шаблона:

[ 
    { 
    "Name": "Product 1", 
    "ExpiryDate": "2000-12-29T00:00Z", 
    "Price": 99.95, 
    "Sizes": null 
    }, 
    { 
    "Name": "Product 2", 
    "ExpiryDate": "2009-07-31T00:00Z", 
    "Price": 12.50, 
    "Sizes": null 
    } 
]

Является ли это тем, что мне не хватает? родительский узел «repo» из моих данных, чтобы я мог повторить мой шаблон?

Заранее благодарим за ваше время.

-ed

источник

2012-08-05 user1577704

короткий ответ: ДА

длинный ответ: по соображениям безопасности [1], вам нужно обернуть JSON Aray в объекте в любом случае. для Усы или любой другой библиотеки, чтобы иметь доступ к вашему массиву, вам нужно иметь хотя бы один родительский ключ, на котором вы можете создать свой итератор.
Ключ «repo» на вашем образце - это помощник, который вам нужно сообщить усам «идите и итерации по массиву, который находится внутри ключа репо», иначе вы не сможете сообщить шаблону , что вы хотите вывести где

[1] это только один из многих ресурсов, которые можно найти о том, почему вам нужно обернуть ваш ответ JSON в объект http://incompleteness.me/blog/2007/03/05/json-is-not-as-safe-as-people-think-it-is/

источник

2012-08-06 03:18:57 gonchuki

Спасибо за ответ @gonchuki, пока единственная проблема, которую я вижу, - это то, как JSON.net сериализует мой объект, поскольку он обертывает его вокруг родительского узла. – user1577704

в общем случае, вы можете обернуть свой массив в анонимный объект, прежде чем передавать его через сериализатор JSON, чтобы при десериализации вы имели объект с одним ключом (скажем, 'repo'), который содержит массив, который вы хотите использовать на ваш шаблон. – gonchuki

Per @stealth по этому вопросу Mustache.js: Iterate over a list received via json

{{ #. }} 
     <b>{{Name}}</b> 
    {{ /. }}

Примечание. Единственное отличие от ответа @ stealth - «#» вместо «/».

источник

2013-04-02 16:37:17 marty

Я не могу заставить его работать, любые другие настройки, которые вы, ребята, предлагаете – Matt

Наконец-то была найдена простая работа, предложенная по следующей ссылке Амита, http://stackoverflow.com/questions/9058774/handlebars-mustache-is-there -a-built-in-way-to-loop-through-the-properties- – Matt

Просто возьмите данные своего веб-сервиса и добавьте родительский узел, как это. mustacheFormattedData = {'parenkey': данные веб-службы}; – Matt

Данные линии = {'role': data}; является наиболее важным. Его прикрепление ключ к данным, возвращаемые Web API или любого другого источника данных, как PageMethods или веб-службы

$.ajax({ 
     dataType: "json", 
     url: '/api/TestApi/GetAllRole', 
     success: function (data) {   
      data = { 'roles': data }; // formatting the data to support the mustache format 
      var html = Mustache.to_html($('#RoleTemplate').html(), data); 
      $('#tblRole').append(html); 

     } 
    });

Немногие из моих статей о MustacheJs можно найти здесь

INLINE ФИЛЬТР ДЛЯ ОСНОВНОЙ GRID С ИСПОЛЬЗОВАНИЕМ MUSTACHEJS http://www.techguides.in/add-inline-filter-to-basic-grid-using-mustache/

Master Детали сетки на загрузке данных Demand: Использование Mustache.JS http://www.techguides.in/master-details-grid-on-demand-data-loading-using-mustache-js/

Сортировка сетки с использованием MustacheJs http://www.techguides.in/enable-sorting-in-a-grid-bound-using-mustache-js/

источник

2013-09-02 15:23:31 Matt

Усы JS Шаблон с JSON Collection

ответ

Смежные вопросы