усы.форматирование даты js

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

Мой 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)/"
    }
]};

Моя функция обработки 

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 Допустим, я хотел выполнить какую-то функцию или форматирование для одного или нескольких объектов перед рендерингом., как лучше всего это сделать?

6 8
mustache string json

6 ответов:

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

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

-2

Вы можете использовать "лямбда" 

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

Затем в разметке: 

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

По ссылке:

Когда значение является вызываемым объектом, таким как функция или лямбда, объект будет вызван и передан блок текста. Переданный текст-это буквальный блок, не имеющий тренда.

17

Я создал небольшое расширение для усов.JS код, который позволяет использовать средства форматирования внутри выражения, подобно {{выражение | форматирования}}

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


      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/

7

Это было давным-давно, но попал на это, ища точно то же самое. Mustachejs (now) позволяет вызывать функции передаваемых данных и не только; в функции значение this является тем значением, которое истинно в разделе.

Если мой шаблон выглядит так: 

{{#names}}
    <p>Name is:{{name}}</p>
    <!-- Comment will be removed by compileTemplates.sh
         #lastLogin is an if statement if lastLogin it'll do this 
         ^lastLogin will execute if there is not lastLogin      
    -->
    {{#lastLogin}}
    <!-- 
      formatLogin is a method to format last Login 
      the function has to be part of the data sent 
      to the template
    -->
    <p>Last Login:{{formatLogin}}</p>
    {{/lastLogin}}
    {{^lastLogin}}
    not logged in yet
    {{/lastLogin}}
    {{#name}}
     passing name to it now:{{formatLogin}}
    {{/name}}
{{/names}}

И такие данные: 

var data={
    names:[
        {name:"Willy",lastLogin:new Date()}
    ],
    formatLogin:function(){
          //this is the lastDate used or name based on the block
                  //{{#name}}{{formatLogin}}{{/name}}:this is name
                  //{{#lastLogin}}{{formatLogin}}{{/lastLogin}}:this is lastLogin
          if(!/Date\]$/.test(Object.prototype.toString.call(this))){
              return "Invalid Date:"+this;
          }
          return this.getFullYear()
            +"-"+this.getMonth()+1
            +"-"+this.getDate();
    }
};
var output = Mustache.render(templates.test, data);
console.log(output);
6

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

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

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

goalsCollection.targetDate = 
  goalsCollection.targetDate.substring(6, goalsCollection.targetDate.length - 1);
Эти методы не являются специфичными для усов и могут использоваться для манипулирования данными для любой библиотеки. Увидеть Мозилла Центр разработки документации на подстроки для более подробной информации.
1

Чтобы объявить функцию в 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));
0