在Meteor中重新初始化代码

Reinitializing code in Meteor

本文关键字:初始化 代码 Meteor      更新时间:2023-09-26

我今天开始为一个电子商务网站编写Meteor应用程序。这是我的basic.js文件中的一些代码。

Router.route("/shop", function () {
  this.layout("shop");
  this.render("catalog");
});

/shop被渲染时,shop.js内部的一些代码被执行:

Template.shop.rendered = function () {
  if ($("figure").hasClass("selected")) {
    var
      productSelected = $("figure.selected"),
      productPrice = productSelected.data("price"),
      productTitle = productSelected.data("product"),
      productLocation = productSelected.find("a").attr("href");
    $(".product-title").html(productTitle);
    $(".product-cost").html(productPrice);
    $(".content__info__title--overview").find("a").attr("href", productLocation);
  }
  // Slideshow
  var galleryItems = $(".content").children("section");
  galleryItems.each(function () {
    var container = $(this);
    // Update slider when user clicks on the preview images
    container.on("click", ".move-down, .move-up", function (event) {
      event.preventDefault();
      if ($(this).hasClass("move-down")) {
        nextSlide(container);
      } else {
        prevSlide(container);
      }
      if ($(this).hasClass("selected")) {
        var
          productPrice = $(this).data("price"),
          productTitle = $(this).data("product");
        $(".product-title").html(productTitle);
        $(".product-cost").html(productPrice);
      }
    });
  });
  // Next Slide
  function nextSlide(container, n) {
    var visibleSlide = container.find("figure.selected");
    if (typeof n === "undefined") {
      n = visibleSlide.index() + 1;
    }
    $("figure.selected").removeClass("selected");
    $(".content__products figure").eq(n).addClass("selected").removeClass("move-down").prevAll().removeClass("move-down move-up").addClass("hide-up").end().prev().removeClass("hide-up").addClass("move-up").end().next().addClass("move-down");
  }
  // Previous Slide
  function prevSlide(container, n) {
    var visibleSlide = container.find("figure.selected");
    if (typeof n === "undefined") {
      n = visibleSlide.index() - 1;
    }
    $("figure.selected").removeClass("selected");
    $(".content__products figure").eq(n).addClass("selected").removeClass("move-up hide-up").nextAll().removeClass("hide-up move-down move-up").end().next().addClass("move-down").end().prev().removeClass("hide-up").addClass("move-up");
  }
});

现在,当应用程序加载时,这可以很好地工作,但当我访问不同的路线并返回时,shop.js中的代码都不起作用。我不确定我是否做错了什么,但我希望能得到一些指点。

更改从该呈现的模板

Template.shop.rendered

Template.catalog.rendered

因为您要渲染的是catalog route,而不是layout template

顺便说一句,我问的是流星版本,因为在新的1.0.4流星版本Template.shop.rendered = function () {}被弃用了,现在我们使用Template.tabletsList.onRendered(function() {});,试着运行流星更新。

Ethaan在评论中回答了我的问题。我只需要将Template.shop.rendered更改为Template.catalog.rendered。悲痛万分!