클라이언트 측 JavaScript에서 Express.js 로컬 변수에 액세스

클라이언트 측 JavaScript에서 Express.js 로컬 변수에 액세스

---

내가이 일을 제대로하고 있는지, 그렇지 않다면 여러분이 어떻게 접근할지 궁금합니다.

MongoDB 데이터베이스에서 검색된 일부 데이터를 렌더링해야하는 Jade 템플릿이 있으며 클라이언트 측 JavaScript 파일 내에서 해당 데이터에 액세스 할 수 있어야합니다.

Express.js를 사용하고 있으며 데이터를 다음과 같이 Jade 템플릿으로 보냅니다.

var myMongoDbObject = {name : 'stephen'};
res.render('home', { locals: { data : myMongoDbObject } });

그런 다음 home.jade 내부에서 다음 과 같은 작업을 수행 할 수 있습니다.

p Hello #{data.name}!

다음과 같이 씁니다.

Hello stephen!

이제 내가 원하는 것은 데이터베이스를 업데이트하기 위해 서버에 다시 게시하기 전에 버튼 클릭으로 개체를 조작 할 수 있도록 클라이언트 측 JS 파일 내에서이 데이터 개체에 액세스하는 것입니다.

Jade 템플릿의 숨겨진 입력 필드에 "데이터"개체를 저장 한 다음 클라이언트 측 JS 파일에서 해당 필드의 값을 가져 와서이 작업을 수행 할 수있었습니다.

home.jade 내부

- local_data = JSON.stringify(data) // data coming in from Express.js
input(type='hidden', value=local_data)#myLocalDataObj

그런 다음 클라이언트 측 JS 파일에서 다음과 같이 local_data에 액세스 할 수 있습니다.

myLocalFile.js 내부

var localObj = JSON.parse($("#myLocalDataObj").val());
console.log(localObj.name);

그러나이 문자열 화 / 파싱 비즈니스는 지저분합니다. 내 데이터 객체의 값을 내 Jade 템플릿의 DOM 객체에 바인딩 한 다음 jQuery를 사용하여 해당 값을 가져올 수 있다는 것을 알고 있지만 클라이언트 측 JS의 Express에서 돌아 오는 실제 객체에 액세스하고 싶습니다.

내 솔루션이 최적입니까? 어떻게이 작업을 수행 할 수 있습니까?

---

렌더링이 완료되면 렌더링 된 HTML 만 클라이언트로 전송됩니다. 따라서 더 이상 변수를 사용할 수 없습니다. 당신이 할 수있는 일은 입력 요소에 객체를 작성하는 대신 렌더링 된 JavaScript로 객체를 출력하는 것입니다.

script(type='text/javascript').
    var local_data =!{JSON.stringify(data)}

편집 : 분명히 Jade는 첫 번째 닫는 괄호 뒤에 점이 필요합니다.

---

조금 다르게합니다. 내 컨트롤러에서 다음을 수행합니다.

res.render('search-directory', {
  title: 'My Title',
  place_urls: JSON.stringify(placeUrls),
});

그리고 내 jade 파일의 javascript에서 다음과 같이 사용합니다.

var placeUrls = !{place_urls};

이 예에서는 twitter 부트 스트랩 typeahead 플러그인에 사용됩니다. 그런 다음 필요한 경우 다음과 같이 구문 분석 할 수 있습니다.

jQuery.parseJSON( placeUrls );

로컬을 생략 할 수도 있습니다. {}.

---

Jade 템플릿 사용 :

포함 된 정적 HTML 파일 위에 @Amberlamps 코드 스 니펫을 삽입하는 경우 !!! 를 지정해야합니다. 뷰 /index.jade 에서 스타일링이 깨지는 것을 방지하기 위해 상단에 5 개가 있습니다 .

!!! 5
script(type='text/javascript')
    var local_data =!{JSON.stringify(data)}

include ../www/index.html

이것은 실제 정적 HTML 페이지가로드되기 전에 local_data 변수를 전달하므로 처음부터 변수를 전역 적으로 사용할 수 있습니다.

Serverside (Jade 템플릿 엔진 사용) -server.js :

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get('/', ensureAuthenticated, function(request, response){
    response.render('index', { data: {currentUser: request.user.id} });
});

app.use(express.static(__dirname + '/www'));

---

렌더링 호출에서 지역 변수를 전달할 필요가 없습니다. 지역 변수는 전역 변수입니다. pug 파일 호출에서 키 표현식을 넣지 마십시오 #{}. 다음과 같이 사용하십시오.base(href=base.url)

곳 base.url이다app.locals.base = { url:'/' };

---

Have you heard of socket.io? (http://socket.io/). An easy way to access the object from express would be to open a socket between node.js and your javascript. This way data can be easily passed to the client side and then easily manipulated using javascript. The code wouldn't have to be much, simply a socket.emit() from node.js and a socket.on() from the client. I think that'd be an effective solution!

참고URL : https://stackoverflow.com/questions/10919650/accessing-express-js-local-variables-in-client-side-javascript