我今天开始为电子商务网站编写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() {});,尝试运行流星更新。

关于javascript - 在Meteor中重新初始化代码,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29246234/

10-11 08:58