2012-04-08 4 views
8

나는 콧수염 .js를 사용하기 시작했으며 지금까지 나는 매우 감명 받았다. 두 가지가 나에게 힘들지만. 첫 번째는 두 번째로 이어 지므로 나와 함께 견뎌야합니다.mustache.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의 요구가 분석 볼 수 있지만 나는 그렇게하는 방법이 확실하지으로 내 현재 함수 내에서.

질문 2 렌더링하기 전에 하나 이상의 개체에서 일부 기능이나 서식을 지정하고 싶습니다. 가장 좋은 방법은 무엇입니까?

답변

-2

클라이언트/서버에서 공유 할 수 있기 때문에 내 프로젝트에도 Mustache를 사용하고 있습니다. 내가 끝낸 일은 모든 값 (날짜, 통화)을 문자열 서버 측에 서식 지정하는 것이므로 헬퍼 Javascript 함수에 의존 할 필요가 없습니다. 하지만 클라이언트 측에서 이러한 값에 대해 논리를 수행하는 경우에는 잘 작동하지 않을 수 있습니다.

handlebars.js은 본질적으로 콧수염이지만 클라이언트 쪽 서식 지정 등을 도울 수있는 확장명을 사용하는 것이 좋습니다. 여기서 손실은 핸들 바의 서버 측 구현을 찾지 못할 가능성이 크다는 것입니다.

+10

이것은 나쁜 대답입니다. 숫자의 형식은 프리젠 테이션 논리입니다. 비즈니스 또는 응용 프로그램 논리가 아닙니다. 그것은 서버에 속하지 않습니다. 오히려 템플릿 언어 또는 GUI의 일부 여야합니다. – egervari

+0

나는 이전의 의견에 동의한다 : "lamdba를 사용한다"는 대답이 정확하다 –

+0

"It 's presentation logic"이 너무 얕다. Mustache에서 복잡한 서식 지정 기능을 어떻게 재사용합니까? 이러한 독단적 인 견해를 따르기 위해 람다를 붙여 넣는 것은 서버 데이터에 문자열을 추가하는 것보다 나쁩니다. toString()이 아닌 경우 문자열 표현을 만드는 것은 표현 함수가 아닙니다. 형식을 지정하는 방법이 객체에 따라 다르면 그 객체에 확실히 포함됩니다. 그렇지 않으면 프로젝트 전체에 중복 서식 지정 코드가 생기고 차이가 발생합니다. 거의 모든 회사가이 값 비싼 실수를합니다. 도그마에서 벗어나서 실용적으로 행동하십시오. – grantwparks

1

당신은 간단한 문자열 방법을 사용하여 타임 스탬프를 얻을 수 있습니다 :

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

이 당신의 타임 스탬프마다 같은 길이 인에 따라 달라집니다. 또 다른 옵션은 다음과 같습니다

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

이러한 기술은 콧수염에 국한되지 않는 어떤 라이브러리에 대한 데이터를 조작하는 데 사용할 수 있습니다. 자세한 내용은 Mozilla Developer Center Documentation on substring을 참조하십시오.

17

당신은 마크 업에서 그런 다음 "lambda"

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

를 사용할 수 있습니다

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

을 링크에서 :

값이 호출 객체는 함수로,이다 또는 lambda를 호출하면 객체가 호출되어 텍스트 블록을 전달합니다. 전달 된 텍스트는 렌더링되지 않은 리터럴 블록입니다.

+1

자, 어떻게 작동 할까?하지만 결과는 직렬화 된 사전이므로 'FormatDate'함수를 포함하도록 JSON을 구성하는 방법은 무엇입니까? – Dooie

+1

JSONP를 사용해야합니다. 순수한 데이터 대신 실행 가능한 스크립트를 돌려 준다. 데이터/프리젠 테이션/로직 분리를 어느 정도 상쇄한다. –

+1

Mustache.to_html (tpl, $ .extend ({}, DefaultTplFunctions, collection})과 같은 형식을 사용하면 DefautTplFunctions 객체에 FormatDate 함수 (및이 함수와 비슷한 다른 함수)가 포함됩니다. –

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)); 
5

오래 전 이었지만 똑같은 것을 찾고있었습니다. Mustachejs (now)를 사용하면 전달 된 데이터의 함수를 호출 할 수 있습니다. 함수에서 this의 값은 섹션에있는 값이 모두 true입니다.

내 템플릿이 같은 경우이 같은

{{#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}} 

그리고 데이터 : 나는 표현의 내부 포매터의 사용을 가능하게 Mustache.js위한 작은 확장을 만든

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); 
+1

+1 훨씬 훨씬 많이 완전한 대답 – geographika

7

, like {{expression | 포맷터}} 당신은 어쨌든이 같은 날짜 값을 구문 분석하는 기능 만들어야

:

{{TargetDate | date}} 

당신은 잡아 수 있습니다 : 당신의 표현에 포맷터를 추가 한 후


     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()); 
     } 
     }; 

과 여기에서 코드 : http://jvitela.github.io/mustache-wax/

+0

콧수염 wax.js가 렌더링 될 html에서 #template을 가져올 때 작동하지 않는다는 것을 깨닫게했거나 사용하는 다른 방법이 있습니까? 현재 Skwashy

+0

예제를 제공해 주시겠습니까? 일반적으로 먼저 템플릿을 문자열에로드 한 다음 Mustache.render에 전달합니다. – JVitela