草庐IT

javascript - meteor ,如何更改事件模板( View )?

coder 2024-12-09 原文

我正在构建一个有两个 View 的应用:主页和 View 列表

当用户在主页 View 上点击列表名称时,它应该更改为“ View 列表”模板。我添加了一个名为“view”的 session 变量,在启动时将其设置为“home”。当在主屏幕上的其中一项(列表名称)上检测到单击事件时,它将 View 的值更改为“viewList”。然后在 HTML 中,如果“view”是“home”,我有一个 if 语句来显示 home 模板,否则显示“viewList”模板。

我可以看出第一部分是有效的,因为我正在输出“view”的值,并且当您单击列表名称时它会输出值“viewList”,只是不会更改模板。

我错过了什么?

我的代码:

我的列表.js:

Lists = new Mongo.Collection("lists");

if (Meteor.isClient) {
  Meteor.startup( function() {
    Session.set("view", "home");
  });

  Template.main.helpers({
    view: function () {
      return Session.get("view");
    }
  });

  Template.home.helpers({
    lists: function () {
      return Lists.find({}, {sort: {lastUsed: -1}});
    }
  });

  Template.home.events({
    "submit #new-list": function (event) {
      var name = event.target.listName.value;
      Lists.insert ({
        name: name,
        createdAt: new Date(),
        lastUsed: new Date()
      });
    },
    "click .list-row": function (event) {
        Session.set("view", "viewList");
    }
  });
}

我的列表.html:

<head>
  <title>My Lists</title>
</head>

<body>
    {{> main}}
</body>

<template name="main">
    {{view}}
    {{#if view "home"}}
        {{> home}}
    {{else}}
        {{> viewList}}
    {{/if}} 
</template>

<template name="home">
  <header>
    <h2>My Lists</h2>
  </header>
    <ul id="lists">
        <li>
            <form id="new-list">
                <input type="text" name="listName" value="My List 1">
                <input type="submit" value="Save">
            </form>
        </li>
        {{#each lists}}
            {{> list}}
        {{/each}}
    </ul>
</template>

<template name="viewList">
  <header>
    <h2>View List</h2>
  </header>
<!-- list details will show here -->
</template>

<template name="list">
    <li class="list-row" id="{{_id}}">{{name}}</li>
</template>

最佳答案

如果您想从模板 View 进行更改,我建议您安装 iron:router包。

运行

meteor add iron:router

莱斯特创造了 routes.js/lib 上文件夹

现在让我们一步一步来。

首先在 myAppName/client/views/layout.html 上创建 1 个模板

<template name="layout">
   {{> yield}}
</template>

并使用此代码更新 routes.js。

Router.configure({
    layoutTemplate: 'layout' // here we say that layout template will be our main layout
});

现在在同一个 routes.js 上创建这 2 条路线。

Router.route('/home', function () {
  this.render('home');
});

Router.route('/viewList', function () {
     this.render('viewList');
  });

如果您导航到 localhost:3000/home,则使用它或 /viewList你会在那里看到 html 内容。

备注:<header>在模板中您不需要它。

现在这只是一个例子,因为我真的不知道你的主要想法是什么。

您正在调用 {{#each lists}}home里面模板,那么拥有 viewList 有什么意义呢?模板?

现在如果您想为每个列表创建单独的动态路由,您可以试试这个。

Router.map(function () {
  this.route('listViews', {
    path: '/listViews/:_id',
    waitOn: function(){
        return Meteor.subscribe('lists')
    },
    data: function(){
      return Lists.findOne({_id: this.params._id});
    }
  });
}); 

现在有了这个,如果您转到 localhost:300/listView/35dwq358ew,您就拥有了 List 集合中每个对象的动态模板。例如,您将使用一些数据渲染 listView。

你可以在模板列表中做这样的事情

<template name="list">
    <li class="list-row" id="{{_id}}">{{name}}</li>
    <li><a href="/listViews/{{this._id}}">Check this List in detail</a></li>
</template>

viewList 模板将如下所示。

<template name="viewList">
    <h2>{{title}}</h2>
<!-- list details will show here -->
    {{informationAboutList}}
</template>

关于javascript - meteor ,如何更改事件模板( View )?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28535863/

有关javascript - meteor ,如何更改事件模板( View )?的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri,根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby-on-rails - Ruby on Rails 迁移,将表更改为 MyISAM - 2

    如何正确创建Rails迁移,以便将表更改为MySQL中的MyISAM?目前是InnoDB。运行原始执行语句会更改表,但它不会更新db/schema.rb,因此当在测试环境中重新创建表时,它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移,以便将现有表修改为MyISAM并更新schema.rb,以便我的数据库和相应的测试数据库得到相应更新? 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb,然后运行:rakedb:schema:load,但是,这将覆盖您的数据。我的做法是(假设

  4. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息? 最佳答案 在Rails3中,update_all不返回任何有意义的信息,除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  6. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  10. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

随机推荐