meteor
블레이즈 사용자 인터페이스 레시피 (부트 스트랩, jQuery 없음)

비고

드롭 다운 메뉴

다음 예제에서는 Blaze 만 사용하고 JQuery는 사용하지 않고 Bootstrap 드롭 다운 메뉴를 만듭니다.

문서 객체 모델

    <nav class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{getSelectedValue}} <span class="glyphicon glyphicon-user pull-right"></span></a>
        <ul class="fullwidth dropdown-menu">
          <li id="firstOption" class="fullwidth"><a href="#">15 Minutes <span class="glyphicon glyphicon-cog pull-right"></span></a></li>
          <li class="divider"></li>
          <li id="secondOption"><a href="#">30 Minutes <span class="glyphicon glyphicon-stats pull-right"></span></a></li>
          <li class="divider"></li>
          <li id="thirdOption"><a href="#">1 Hour <span class="badge pull-right"> 42 </span></a></li>
          <li class="divider"></li>
          <li id="fourthOption"><a href="#">4 Hour <span class="glyphicon glyphicon-heart pull-right"></span></a></li>
          <li class="divider"></li>
          <li id="fifthOption"><a href="#">8 Hours <span class="glyphicon glyphicon-log-out pull-right"></span></a></li>
        </ul>
      </li>
    </nav>

자바 스크립트

Template.examplePage.helpers({
  getSelectedValue:function(){
    return Session.get('selectedValue');
  }
});
Template.dropDownWidgetName.events({
  'click #firstOption':function(){
    Session.set('selectedValue', 1);
  },
  'click #secondOption':function(){
    Session.set('selectedValue', "blue");
  },
  'click #thirdOption':function(){
    Session.set('selectedValue', $('#thirdOption').innerText);
  },
  'click #fourthOption':function(){
    Session.set('selectedValue', Session.get('otherValue'));
  },
  'click #fifthOption':function(){
    Session.set('selectedValue', Posts.findOne(Session.get('selectedPostId')).title);
  },
});

Navbars

매우 일반적인 작업은 반응 형 탐색 모음을 만들고 사용자가 어떤 페이지에 있는지 또는 사용자가 어떤 역할에 속해 있는지에 따라 다양한 컨트롤을 가진 작업 / 바닥 글 막대를 만드는 것입니다. 이러한 컨트롤을 만드는 방법을 설명합니다.

라우터

Router.configure({
  layoutTemplate: 'appLayout',
});
Router.route('checklistPage', {
    path: '/lists/:_id',
    onBeforeAction: function() {
      Session.set('selectedListId', this.params._id);
      this.next();
    },
    yieldTemplates: {
      'navbarFooter': {
        to: 'footer'
      }
    }
  });

Navbar 템플릿 만들기

<template name="navbarFooter">
  <nav id="navbarFooterNav" class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <ul class="nav navbar-nav">
      <li><a id="addPostLink"><u>A</u>dd Post</a></li>         
      <li><a id="editPostLink"><u>E</u>dit Post</a></li>          
      <li><a id="deletePostLink"><u>D</u>elete Post</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">       
      <li><a id="helpLink"><u>H</u>elp</a></li>
    </ul>
  </nav>
</template>

레이아웃의 수율 정의

<template name="appLayout">
  <div id="appLayout">
    <header id="navbarHeader">
      {{> yield 'header'}}     
    </header>

      <div id="mainPanel">
        {{> yield}}
      </div>

    <footer id="navbarFooter" class="{{getTheme}}"">
      {{> yield 'footerActionElements' }}
    </footer>
  </div>
</template>

모달

이 다음은 UI 요소를 존재 여부에 따라 전환하는 순수 블레이즈 방식입니다. 이것을 모달 대화 상자를 대체하는 것으로 생각하십시오. 사실이 방법을 사용하여 모달 대화 상자를 구현하는 방법에는 여러 가지가 있습니다 (단순히 배경 마스크와 애니메이션 추가).

문서 객체 모델

<template name="topicsPage">
  <div id="topicsPage" class="container">
    <div class="panel">
      <div class="panel-heading">
        Nifty Panel
      </div>
      <!-- .... -->
      <div class="panel-footer">
        <!-- step 1.  we click on the button object -->
        <div id="createTopicButton" class="btn {{ getPreferredButtonTheme }}">Create Topic</div>
      </div>
    </div>

    <!-- step 5 - the handlebars gets activated by the javascript controller -->
    <!-- and toggle the creation of new objects in our model -->
    {{#if creatingNewTopic }}
    <div>
      <label for="topicTextInput"></label>
      <input id="topicTextInput" value="enter some text..."></input>
      <button class="btn btn-warning">Cancel</button>
      <button class="btn btn-success">OK</button>
    </div>
    {{/if}}
  </div>
</template>

자바 스크립트

// step 2 - the button object triggers an event in the controller
// which toggles our reactive session variable
Template.topicsPage.events({
  'click #createTopicButton':function(){
    if(Session.get('is_creating_new topic'){
      Session.set('is_creating_new_topic', false);
    }else{
      Session.set('is_creating_new_topic', true);
    }
  }
});

// step 0 - the reactive session variable is set false
Session.setDefault('is_creating_new_topic', false);

// step 4 - the reactive session variable invalidates
// causing the creatNewTopic function to be rerun
Template.topicsPage.creatingNewTopic = function(){
  if(Session.get('is_creating_new_topic')){
    return true;
  }else{
    return false;
  }
}

태그 달기

데이터베이스 계층 먼저 데이터 분산 프로토콜을 설정하여 데이터를 데이터베이스에 유지하고 클라이언트에 전달할 수 있는지 확인합니다. 세 개의 파일을 생성해야합니다. 하나는 서버에, 하나는 클라이언트에, 다른 하나는 둘 다에 공유됩니다.

// client/subscriptions.js
Meteor.subscribe('posts');

//lib/model.js
Posts  = new Meteor.Collection("posts");
Posts.allow({
    insert: function(){
        return true;
    },
    update: function () {
        return true;
    },
    remove: function(){
        return true;
    }
});


// server.publications.js
Meteor.publish('posts', function () {
  return Posts.find();
});

이 예제에서는 태그 지정 패턴에 대해 다음과 같은 문서 스키마를 가정합니다.

{
  _id: "3xHCsDexdPHN6vt7P",
  title: "Sample Title",
  text: "Lorem ipsum, solar et...",
  tags: ["foo", "bar", "zkrk", "squee"]
}

문서 객체 모델
두 번째로 우리는 애플리케이션 계층에 객체 모델을 생성하려고합니다. 다음은 부트 스트랩 패널을 사용하여 제목, 텍스트 및 태그가있는 게시물을 렌더링하는 방법입니다. selectedPost , tagObjects 및 tag 는 모두 blogPost 템플릿의 도우미 함수입니다. title 과 text 는 문서 기록의 필드입니다.

<template name="blogPost">
  {{#with selectedPost }}
    <div class="blogPost panel panel-default">
      <div class="panel-heading">
        {{ title }}
      </div>
        {{ text }}
      <div class="panel-footer">
        <ul class="horizontal-tags">
          {{#each tagObjects }}
          <li class="tag removable_tag">
            <div class="name">{{tag}}<i class="fa fa-times"></i></div>
          </li>
          {{/each}}
          <li class="tag edittag">
            <input type="text" id="edittag-input" value="" /><i class="fa fa-plus"></i>
          </li>
        </ul>
      </div>
    </div>
  {{/with}}
</template>

자바 스크립트
다음으로 우리는 데이터를 반환하고 데이터 입력을 구현하는 등의 컨트롤러를 설정하려고합니다.

// you will need to set the selectedPostId session variable 
// somewhere else in your application
Template.blogPost.selectedPost = function(){
  return Posts.findOne({_id: Session.get('selectedPostId')});
}

// next, we use the _.map() function to read the array from our record
// and convert it into an array of objects that Handlebars/Spacebars can parse
Template.blogPost.tagObjects = function () {
    var post_id = this._id;
    return _.map(this.tags || [], function (tag) {
        return {post_id: post_id, tag: tag};
    });
};

// then we wire up click events 
Template.blogPost.events({
    'click .fa-plus': function (evt, tmpl) {
        Posts.update(this._id, {$addToSet: {tags: value}});
    },
    'click .fa-times': function (evt) {
        Posts.update({_id: this._id}, {$pull: {tags: this.tag}});
    }
});

스타일링
마지막으로 전화, 태블릿, 데스크톱 용으로 다른보기를 정의하고자합니다. 사용자 입력에 따라 기본적인 UI 스타일링이 가능합니다. 이 예에서는 Sass와 Stylus의 구문이 거의 같아야하지만 Less 프리 컴파일러를 사용합니다.

// default desktop view
.fa-plus:hover{
  cursor: pointer;
}
.fa-times:hover{
  cursor: pointer;
}
// landscape orientation view for tablets
@media only screen and (min-width: 768px) {
  .blogPost{
     padding: 20px;
  }
}
// portrait orientation view for tablets
@media only screen and (max-width: 768px) {
  .blogPost{
     padding: 0px;
       border: 0px;
  }
}
// phone view
@media only screen and (max-width: 480px) {
  blogPost{
   .panel-footer{
       display: none;
    }
  }
}

경고 및 오류

경고 및 오류는 모든 Meteor 구성 요소 패턴 중 가장 단순합니다. 그것들은 사실 단순하기 때문에 간신히 자신의 패턴으로 등록합니다. FlashAlert 모듈이나 패턴을 추가하는 대신 필요한 Handlebar 템플릿의 스타일을 지정하고 도우미를 추가 한 다음 반응적인 Session 변수에 와이어 링해야합니다.

선결 요건
다음 코드는 각각 LESS 프리 컴파일러와 Bootstrap-3을 필요로합니다. 작동 시키려면 명령 프롬프트에서 다음 명령을 실행해야합니다.

meteor add less
meteor add ian:bootstrap-3 

문서 개체 모델 : 경고 개체 정의 문서 개체 모델 에 몇 가지 요소를 추가하여 시작하십시오. 이 경우 경고를위한 div 요소를 만들고 싶습니다. 최대 2 개의 핸들바 도우미에 연결됩니다.

<template name="postsPage">
  <div id="postsPage" class="page">
    <div id="postsPageAlert" class="{{alertColor}}">{{alertMessage}}</div>
    <div class="postsList">
      <!-- other code you can ignore in this example -->
    </div>
    <div id="triggerAlertButton" class="btn btn-default">
  </div>
</template>

Javascript : Template Helper 정의 그러면 객체 모델을 데이터로 채울 일부 컨트롤러를 연결하려고합니다. 우리는 2 개의 반응 세션 변수와 2 개의 핸들바 헬퍼를 사용합니다.

Session.setDefault('alertLevel', false);
Session.setDefault('alertMessage', "");

Template.postsPage.alertColor = function(){
 if(Session.get('alertLevel') == "Success"){
  return "alert alert-success";
 }else if(Session.get('alertLevel') == "Info"){
  return "alert alert-info";
 }else if(Session.get('alertLevel') == "Warning"){
  return "alert alert-warning";
 }else if(Session.get('alertLevel') == "Danger"){
  return "alert alert-danger";
 }else{
  return "alert alert-hidden"
 }
}

Template.postsPage.alertMessage = function(){
  return Session.get('alertMessage');
}

스타일 : DOM Visibility 정의 하기 이제 CSS로 돌아가서 postsPage 요소의 두 가지보기를 정의하려고합니다. 첫 번째 뷰에서는 객체 모델의 모든 내용을 표시합니다. 두 번째보기에서는 객체 모델의 일부 내용 만 표시됩니다.

#postsPage{
  .alert{
    display: block;
  }
  .alert-hidden{
    display: none;
  }
}

Javascript : 경고 트리거링
마지막으로 컨트롤러로 돌아가서 클릭하면 경고를 발생시키는 이벤트 컨트롤러를 정의합니다.

Template.postsPage.events({
  'click #triggerAlertButton':function(){
    Session.set('alertLevel', 'Success');
    Session.set('alertMessage', 'You successfully read this important alert message.');
  }
});

그리고 그게 전부입니다! 슈퍼 간단, 맞죠? 이제 코드베이스의 어느 곳에서나 alertLevel 및 alertMessage 세션 변수를 설정할 수 있습니다. 그러면 응용 프로그램이 경고 및 오류 메시지를 반응적으로 표시합니다! :)

탭 워크 플로우

문서 객체 모델
개체 모델에서 탭과 창을 만드는 것으로 시작하십시오 ...

<template name="samplePage">
  <div id="samplePage" class="page">
    <ul class="nav nav-tabs">
      <li id="firstPanelTab"><a href="#firstPanel">First</a></li>
      <li id="secondPanelTab"><a href="#secondPanel">Second</a></li>
    </ul>

    <div id="firstPanel" class="{{firstPanelVisibility}}">
      {{> firstPanel }}
    </div>
    <div id="secondPanel" class="{{secondPanelVisibility}}">
      {{> secondPanel }}
    </div>
  </div>
</template>

자바 스크립트

// this variable controls which tab is displayed and associated application state
Session.setDefault('selectedPanel', 1);

Template.name.helpers({
  firstPanelVisibility: function (){
    if(Session.get('selectedPanel') === 1){
      return "visible";
    }else{
      return "hidden";
    }
  },
  secondPanelVisibility: function (){
    if(Session.get('selectedPanel') === 2){
      return "visible";
    }else{
      return "hidden";
    }
  },
  thirdPanelVisibility: function (){
    if(Session.get('selectedPanel') === 3){
      return "visible";
    }else{
      return "hidden";
    }
  },
  firstPanelActive: function (){
    if(Session.get('selectedPanel') === 1){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  },
  secondPanelActive: function (){
    if(Session.get('selectedPanel') === 2){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  },
  thirdPanelActive: function (){
    if(Session.get('selectedPanel') === 3){
      return "active panel-tab";
    }else{
      return "panel-tab";
    }
  }
});

스타일링

.visible {
  display: block;
  visibility: visible;
}
.hidden {
  display: none;
  visibility: hidden;
}

활성 탭 추가 효과를 위해 활성 탭을 나타내는 클래스를 주입하여이 패턴을 확장 할 수 있습니다.

<li id="firstPanelTab" class="{{firstPanelActive}}"><a href="#firstPanel">First</a></li>
<li id="secondPanelTab" class="{{secondPanelActive}}"><a href="#secondPanel">Second</a></li>

Template.firstPanel.helpers({
  firstPanelActive: function (){
    if(Session.get('selectedPanel') === 1){
      return "active";
    }else{
      return "";
    }
  },
  secondPanelActive: function (){
    if(Session.get('selectedPanel') === 2){
      return "active";
    }else{
      return "";
    }
  },
});