खोज…
टिप्पणियों
उपरोक्त ब्लेज़ उदाहरण http://bootsnipp.com/ लाइब्रेरी के साथ अत्यधिक संगत हैं, जो केवल घटकों के लिए HTML और CSS प्रदान करता है, और जावास्क्रिप्ट को डेवलपर तक छोड़ देता है। यह घटकों को समान अंतर्निहित सॉर्टिंग, फ़िल्टरिंग, क्वेरी और कर्सर विधियों को साझा करने की अनुमति देता है।
ड्रॉप डाउन मेनू
निम्न उदाहरण केवल ब्लेज़ और कोई JQuery का उपयोग करके बूटस्ट्रैप ड्रॉप-डाउन मेनू बनाता है।
दस्तावेज़ ऑब्जेक्ट मॉडल
<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'
}
}
});
एक नवाब टेम्पलेट बनाएँ
<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>
क्रियार्थ द्योतक
यह follwing 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 ब्लॉग पोस्ट टेम्पलेट के सभी सहायक कार्य हैं। 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 स्टाइलिंग। यह उदाहरण कम precompiler का उपयोग करता है, हालांकि वाक्य रचना लगभग सास और स्टाइलस के लिए समान होना चाहिए।
// 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;
}
}
}
अलर्ट और त्रुटियां
अलर्ट और त्रुटियां लगभग सभी उल्का घटक पैटर्न के सबसे सरल हैं। वे वास्तव में बहुत सरल हैं, कि वे मुश्किल से खुद के पैटर्न के रूप में पंजीकृत हैं। FlashAlert मॉड्यूल या पैटर्न को जोड़ने के बजाय, आपको वास्तव में करने की ज़रूरत है एक हैंडलबार टेम्पलेट को उपयुक्त बनाने के लिए, एक सहायक जोड़ें, और इसे एक प्रतिक्रियाशील सत्र चर पर वायर करें।
आवश्यक शर्तें
निम्न कोड को क्रमशः LESS precompiler और Bootstrap-3 की आवश्यकता होती है। आपको उन्हें काम करने के लिए कमांड प्रॉम्प्ट पर निम्नलिखित कमांड चलाने की आवश्यकता होगी।
meteor add less
meteor add ian:bootstrap-3
दस्तावेज़ ऑब्जेक्ट मॉडल: अपने ऑब्जेक्ट ऑब्जेक्ट मॉडल में कुछ तत्वों को जोड़कर अलर्ट ऑब्जेक्ट को परिभाषित करें । इस मामले में, हम अपने अलर्ट के लिए एक दिव्य तत्व बनाना चाहते हैं, जो दो हैंडलबार हेल्पर्स को वायर्ड करता है।
<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>
जावास्क्रिप्ट: डिफाइन टेम्प्लेट हेल्पर्स तब हम कुछ कंट्रोलर्स को वायर करना चाहते हैं जो ऑब्जेक्ट मॉडल को डेटा के साथ पॉप्युलेट करेंगे। हम दो प्रतिक्रियाशील सत्र चर और दो हैंडलबार सहायकों के साथ ऐसा करते हैं।
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');
}
स्टाइलिंग: डोम विज़िबिलिटी को परिभाषित करें फिर हम अपने सीएसएस पर वापस जाना चाहते हैं, और पोस्टपेज तत्व के दो विचारों को परिभाषित करते हैं। पहले दृश्य में, हम अपने ऑब्जेक्ट मॉडल की सभी सामग्री प्रदर्शित करते हैं। दूसरे दृश्य में, हमारे ऑब्जेक्ट मॉडल की केवल कुछ सामग्री प्रदर्शित की जाती है।
#postsPage{
.alert{
display: block;
}
.alert-hidden{
display: none;
}
}
जावास्क्रिप्ट: चेतावनी को ट्रिगर करना
अंत में, हम अपने नियंत्रकों पर वापस जाते हैं, और हम एक घटना नियंत्रक को परिभाषित करते हैं, जो क्लिक करने पर हमारे अलर्ट को ट्रिगर करेगा।
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 "";
}
},
});