首頁 探索 說明
登入
fgm
/
meteor__coursera-meteor-1
1
0
複刻 0
檔案 問題管理 0 合併請求 0
瀏覽代碼

W4.8: added a parametric route image/:id.

Frederic G. MARAND 9 年之前
父節點
e96613dafa
當前提交
ee099d3220
共有 3 個文件被更改，包括 43 次插入 和 4 次删除
統一視圖 顯示文件統計
  1. 4 0
      client/image_share.css
  2. 20 2
      client/image_share.html
  3. 19 2
      client/main.js

+ 4 - 0
client/image_share.css
查看文件 

@@ -10,3 +10,7 @@
 
 body {
 
 body {
 
   padding-top: 50px;
 
   padding-top: 50px;
 
 }
 
 }
 
+
 
+.single-img {
 
+  max-width: 100%;
 
+}

+ 20 - 2
client/image_share.html
查看文件 

@@ -5,8 +5,18 @@
 
 <body>
 
 <body>
 
 </body>
 
 </body>
 
 
 
+<template name="ApplicationLayout">
 
+  {{> yield "navbar" }}
 
+  {{> yield "main" }}
 
+</template>
 
+
 
 <template name="welcome">
 
 <template name="welcome">
 
-  <h1>Welcome to image share {{ username }} !</h1>
 
+  <div class="container">
 
+    <div class="jumbotron">
 
+      <h1>Welcome to image share {{ username }} !</h1>
 
+      <a href="/images" class="btn btn-info">ENTER</a>
 
+    </div>
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <template name="navbar">
 
 <template name="navbar">
 
@@ -17,6 +27,13 @@
 
   </nav>
 
   </nav>
 
 </template>
 
 </template>
 
 
 
+<template name="image">
 
+  <div class="container">
 
+    <h2>{{ img_alt }}</h2>
 
+    <a href="/images"><img src="{{ img_src }}" class="single-img" /></a>
 
+  </div>
 
+</template>
 
+
 
 <template name="image_add_form">
 
 <template name="image_add_form">
 
   <div class="modal fade" id="image_add_form">
 
   <div class="modal fade" id="image_add_form">
 
     <div class="modal-dialog">
 
     <div class="modal-dialog">
 
@@ -41,6 +58,7 @@
 
 
 
 <template name="images">
 
 <template name="images">
 
   <div class="container">
 
   <div class="container">
 
+    {{> image_add_form }}
 
     {{#if currentUser }}
 
     {{#if currentUser }}
 
       <button class="btn btn-success js-show-image-form">add image</button>
 
       <button class="btn btn-success js-show-image-form">add image</button>
 
     {{/if}}
 
     {{/if}}
 
@@ -54,7 +72,7 @@
 
         <div class="col-xs-12 col-md-3" id="{{_id}}">
 
         <div class="col-xs-12 col-md-3" id="{{_id}}">
 
           <div class="thumbnail">
 
           <div class="thumbnail">
 
 
 
-            <img class="thumbnail-img js-image" src="{{img_src}}" alt="{{img_alt}}" />
 
+            <a href="/image/{{ _id }}"><img class="thumbnail-img js-image" src="{{img_src}}" alt="{{img_alt}}" /></a>
 
 
 
             <div class="caption">
 
             <div class="caption">
 
               <h3>Rating: {{ rating }}</h3>
 
               <h3>Rating: {{ rating }}</h3>

+ 19 - 2
client/main.js
查看文件 

@@ -1,10 +1,27 @@
 
 // Routing.
 
 // Routing.
 
+Router.configure({
 
+  layoutTemplate: "ApplicationLayout"
 
+});
 
+
 
 Router.route("/", function () {
 
 Router.route("/", function () {
 
-  this.render("navbar");
 
+  this.render("welcome", { to: "main" });
 
 });
 
 });
 
 
 
 Router.route("/images", function () {
 
 Router.route("/images", function () {
 
-  this.render("images");
 
+  this.render("navbar", { to: "navbar" });
 
+  this.render("images", { to: "main" });
 
+});
 
+
 
+Router.route("/image/:id", function (vars) {
 
+  this.render("navbar", { to: "navbar" });
 
+  this.render("image", {
 
+    to: "main",
 
+    data: function () {
 
+      const id = this.params.id;
 
+      const doc = Images.findOne({ _id: id });
 
+      return doc;
 
+    }
 
+  });
 
 });
 
 });
 
 
 
 // Infiniscroll.
 
 // Infiniscroll.