8

Вопрос по date-parsing, json, string – mustache.js форматирование даты

Я начал использовать mustache.js и до сих пор очень впечатлен. Хотя две вещи меня озадачивают. Первый ведет ко второму, так что терпите меня.

My JSON

{"goalsCollection": [
    {
        "Id": "d5dce10e-513c-449d-8e34-8fe771fa464a",
        "Description": "Multum",
        "TargetAmount": 2935.9,
        "TargetDate": "/Date(1558998000000)/"
    },
    {
        "Id": "eac65501-21f5-f831-fb07-dcfead50d1d9",
        "Description": "quad nomen",
        "TargetAmount": 6976.12,
        "TargetDate": "/Date(1606953600000)/"
    }
]};

My handling function

function renderInvestmentGoals(collection) {
    var tpl = '{{#goalsCollection}}<tr><td>{{Description}}</td><td>{{TargetAmount}}</td><td>{{TargetDate}}</td></tr>{{/goalsCollection}}';
    $('#tblGoals tbody').html('').html(Mustache.to_html(tpl, collection));
}

Q1 Как вы можете видеть мои «TargetDate» нуждается в разборе, но я не уверен, как это сделать в рамках моей текущей функции.

Q2 Скажем, я хотел выполнить некоторую функцию или форматирование на одном или нескольких моих объектах перед рендерингом, каков наилучший способ сделать это?

  • Вы также можете использовать что-то вроде: Mustache.to_html (tpl, $ .extend ({}, DefaultTplFunctions, collection}), а затем объект DefautTplFunctions содержит функцию FormatDate (и другие функции, подобные этой)

    от
  • «Это логика представления»; слишком мелко Как можно повторно использовать сложную функцию форматирования в усах? Копирование + вставка лямбд, чтобы следовать такому догматическому взгляду, хуже, чем добавление строк к данным сервера. Создание строкового представления не является функцией представления, если только не toString (). Если способ форматирования чего-либо зависит от объекта, он обязательно принадлежит этому объекту. В противном случае вы получите дублированный код форматирования по всему проекту и возникнут различия. Почти каждая компания совершает эту дорогостоящую ошибку. Отойдите от догмы и будьте прагматичны.

    от
  • Это плохой ответ. Форматирование чисел - логика представления, а не логика бизнеса или приложения. Он не принадлежит серверу. Скорее, он должен быть частью языка шаблонов или графического интерфейса.

    от
  • Я согласен с предыдущим комментарием: ответ "используйте лямббу" правильный

    от
  • Вы должны будете использовать JSONP, т.е. возвращать исполняемый скрипт вместо чистых данных ... который побеждает разделение данных / представления / логики.

    от
  • Хорошо, я понимаю, как это будет работать, но как мне сконструировать мой JSON, чтобы включить & apos; FormatDate & apos; функция, как мой результат является сериализованным словарем?

    от Dooie
  • Я немного понял, что mustache-wax.js не работает при извлечении #template из html, где он будет отображаться, или есть другой способ его использования? В настоящее время я обертываю вещи в шаблоне временная система & lt; / шаблон>.

    от
  • Не могли бы вы привести пример? Обычно вы загружаете сначала шаблоны в строку, а затем передаете их в Mustache.render.

    от
5 ответов
  • 19

    Вы можете использовать

    & Quot; лямбда & Quot;

    "TargetDate": "/Date(1606953600000)/",
    "FormatDate": function() {
        return function(rawDate) {
            return rawDate.toString();
        }
    }, ...
    

    Тогда в разметке:

    <td>
    {{#FormatDate}}
        {{TargetDate}}
    {{/FormatDate}}
    </td>
    

    По ссылке:

    When the value is a callable object, such as a function or lambda, the object will be invoked and passed the block of text. The text passed is the literal block, unrendered.

  • 0

    Чтобы объявить функцию внутри json, вы всегда можете сделать это.

    var json = '{"RESULTS": true, "count": 1, "targetdate" : "/Date(1606953600000)/"}'
    
    var obj = JSON.parse(json);
    obj.newFunc = function (x) {
      return x;
    }
    
    //OUTPUT
    alert(obj.newFunc(123));
    

  • 1

    Вы можете получить метку времени, используя простые методы String:

    goalsCollection.targetDate = goalsCollection.targetDate.substring(6,18);
    

    Конечно, это зависит от того, что ваша временная метка всегда одинаковой длины. Другой вариант:

    goalsCollection.targetDate = 
      goalsCollection.targetDate.substring(6, goalsCollection.targetDate.length - 1);
    

    Эти методы не являются специфичными для Усов и могут использоваться для манипулирования данными для любой библиотеки. УвидетьЦентр разработчиков Mozilla Документация по подстроке Больше подробностей.

  • -2

    Я также использовал Mustache для своих проектов из-за его способности

    делиться между клиентом и сервером. В итоге я отформатировал все значения (даты, валюта) в строки на стороне сервера, поэтому мне не нужно полагаться на вспомогательные функции Javascript. Это может не сработать для вас, хотя, если вы выполняете логику с этими значениями на стороне клиента.

    Вы также можете посмотреть на использованиеhandlebars.jsЭто, по сути, усы, но с расширениями, которые могут помочь с форматированием на стороне клиента (и не только). Потеря здесь в том, что вы, вероятно, не сможете найти реализацию руля на стороне сервера, если это важно для вас.

  • 9

    Я создал небольшое расширение для Mustache.js

    которое позволяет использовать средства форматирования внутри выражений, например {{expression | форматировщик}}

    В любом случае вам необходимо создать функцию, которая анализирует значение даты, например:

    
          Mustache.Formatters = {
            date: function( str) {
              var dt = new Date( parseInt( str.substr(6, str.length-8), 10));
              return (dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear());
            }
          };
    

    А затем просто добавьте форматер в ваши выражения:

    {{TargetDate | date}}
    

    Вы можете получить код здесь:http://jvitela.github.io/mustache-wax/