小编Yea*_*ats的帖子

Tracker方法并不完全属于Meteor功能的核心,很少用于教程和初学者书籍(如果它们没有得到很好的解释),因此被认为比大多数人更"可怕"框架的其余部分.

举个例子,我从未设法与Tracker.autorun我的项目争吵,因为它似乎永远不会做出预期的事情.这就是文档所说的:

现在运行一个函数,并在其依赖项发生更改时重新运行它.

对我而言,这听起来像是让非反动源反动的一种方式,但是接下来你会看到这样的例子,第一个看起来像这样:

Tracker.autorun(function () {
  var oldest = _.max(Monkeys.find().fetch(), function (monkey) {
    return monkey.age;
  });
  if (oldest)
    Session.set("oldest", oldest.name);
});

这与不使用Tracker.autorun有何不同？游标已经是一个反动的来源,并且让下一个例子处理更加混乱的事情处理另一个反动的来源:塞申斯.

是否Tracker.autorun只与反动源工作,如果有什么是使用它们内部的利益Tracker？让他们倍加反动？

如果我只是:

const App = function() {
    return (
        <div>{this.renderList()}</div>
    )

}

我该如何定义renderList方法？

我不能做const renderList = function() {}(也不能用var或let).我做不到renderList() {}.

什么是正确的语法？

我试图抓住这个div中的"值",这是可编辑的:

<div class="editable-div" contentEditable="true">Hey</div>

我想我可以通过JavaScript简单地做到这一点:

var changedText = $('.editable-div').innerHtml

但是,这个变量总是会返回"undefined",这让我很困惑.

有人可以告诉我如何达到这个"价值"吗？

谈到AWS时,我是个新手.我正在尝试启动一个Ubuntu实例,因为我使用的是云端IDE并且不会让事情变得不必要复杂,我不想生成密钥对而是用户名/密码,所以我选择"继续没有密钥对".我必须同意我知道我没有用户名/密码就无法登录,但它从来没有给我任何...

这有什么用？我该怎么办？

此外,当我按连接时,它说:

实例未与密钥对关联此实例未与密钥对关联.如果没有密钥对,您将需要使用有效的用户名和密码组合登录此实例.

但它实际上从来没有给我任何盒子来输入我没有的用户名/密码.如果它不存在,为什么他们甚至有这个功能呢？

我经常发现自己将我的工作划分为仍然可以使用相同助手的模板.

所以,说我有这个模板结构:

<template name="MainTemplate">
  <div>{{> FirstTemplate}}</div>
  <div>{{> SecondTemplate}}</div>
  <div>{{> ThirdTemplate}}</div>
  <div>{{> FourthTemplate}}</div>
</template>

现在每个模板都想使用相同的帮助器,让我们称之为dataHelper:

Template.MainTemplate.helpers({
  dataHelper: function() {
    //do some stuff
    return result
  }
})

遗憾的是,只需键入{{dataHelper}}事件的工作方式,就无法在第一到第四个模板中访问此帮助程序.

我的解决方案是创建一个全局帮助器,但这似乎有点过分,特别是因为我有几个页面根本不关心这些帮助器.另一种解决方案是创建四个独立的助手,但是,嘿,DRY.

我错过了一些简单的东西吗？

编辑: 这里的MeteorPad演示.(滑块应该可以工作,但它不应该显示第一个图像,只显示它的一小部分.但是有时只显示错误(主要是在Safari或所有不是Chrome的图像上),所以要小心).

编辑:错误是滑块中的第一个图像没有正确显示,只有它的顶部,直到您滑动或单击下一个/上一个按钮.如果从数据库源加载图像,而不是"正常"使用滑块,则只会出现此错误.

我正在使用Ken Wheeler的Slick滑块,虽然它是最好的我发现它带有一个非常讨厌的错误当我想在each循环中加载图像时它只显示它们的顶部直到我按下下一个/上一个按钮或拖动到下一个图像.

我的收藏有以下字段:

"galleryImages": [
    {
      "name": "picture1",
      "position": "first"
    },
    {
      "name": "picture2",
      "position": "second",
    },
    {
      "name": "picture3",
      "position": "last"
    }
]

我gallery用作slick容器:

<div class="gallery">
  {{#each galleryImages}}
    <div>{{> Images}}</div>
  {{/each}}
</div>

<template name="Images">
  <img src="{{imageUrlMaker name}}" alt="{{name}}">
</template>

在imageUrlMaker刚刚创建正确的URL的,不是一个问题来接他们.

当Images被渲染我初始化滑块:

Template.Images.onRendered(function() {
    setTimeout(function() {
        $('.gallery').slick({
            arrows: true,
            dots: true,
            infinite: true,
            mobileFirst: true,
            adaptiveHeight: true
        })
    }, 100)
})

原因setTimeout …

我创建了自己的小图像滑块,为了让加载器工作,我必须创建一个addEventListener然后将加载的图像附加到DOM中.

但是,在这种情况下存在一个错误:当图像需要一段时间加载并且用户在加载之前点击它以查看下一个图像时,事件监听器仍然在后台工作,并且当图像完全时加载它会覆盖用户当前正在查看的内容.

我的HTML:

<template name="ImageGallery">
    {{#each galleryImages}}
        {{#if viewingImage}}
            {{> Image}}
        {{/if}}
    {{/each}}
</template>

<template name="Image">
    <div class="image-in-gallery">LOADING</div>
</template>

检查用户想要看到的"图像" 是否是我们在each迭代中遇到的图像(从而显示它):

Template.ImageGallery.helpers({
    viewingImage: function() {
        var self = this
        var galleryImages = Template.parentData().galleryImages
        var renderImage = false
        var viewing = Template.instance().viewingImage.get()
        var posOfThisImage = lodash.indexOf(galleryImages, self)
        if (viewing === posOfThisImage) {
            renderImage = true
        }
        return renderImage
    }
})

允许用户查看下一个"图像"并在我们结束时循环:

Template.ImageGallery.events({
    'click .click-to-see-next-image': function(event, template) {
        var viewing = template.viewingImage.get()
        var imageCount …

我不需要这个问题的完整答案，而只是关于如何解决它的想法。

假设我网站上的用户想要从这张图片上剪掉背景：

通常，对于某些魔术轮廓工具来说，这是一项工作，但是此站点已经提供了可以提供完美切口模式的内容，即：

如您所见，这辆车将完全适合前一辆。

如果用户可以以某种方式使底部图片适合顶部图片，并剪裁掉外面的所有内容，那将是一个完美的背景去除方法。

我该如何构建这样的东西？还是已经有类似软件的软件了？

底部图片可以是任何东西，例如可以使用全黑模型以便于识别，但是如果使用透明.png图像的轮廓并将其外部的所有内容都切掉，它将更聪明。

（当然，如果有某种方法可以提取抠图所需要的重要部分，也不需要使用图片本身）。

这是我的问题,如果您感兴趣:我想找到用户选择的文本,并在该选择的开头和结尾插入一个标记(以突出显示文本).

正如StackOverflow的顶级思想所引用的那样,找到选择的最佳方法是使用window.getSelection().

与此相结合getRangeAt(0),会出现一系列事物,在哪里startContainer,endContainer看起来特别有希望.startContainer.parentNode直接指向p我开始选择的标签.太棒了!

但是,我如何知道它在React DOM中代表哪个元素？我该如何操纵正确的事情？

这个软件包,ms-seo在各方面肯定都很棒,但遗憾的是,当他撰写自述文件时,作者忘记了像我这样的新手.无论如何,作为一个从未对任何编码社区做出任何贡献的人,我确信我的批评是值得的,所以让我们继续前进.

这个特别的作者提供了一个博客文章和一个包,这是一个有趣的阅读,但大多数直接与自述文件相矛盾,所以我失去了尝试配置设置.

博客文章指出:

您只需要在以下架构中添加seo数据:

SeoCollection.insert({
    "route_name" : "home", // the name of the Iron-Router route
    "title" : "Title of your home site",
    "meta" : [
        {"description": "This is the description of the document"},
        // add more meta tags
    ],
    "og" : [
        { "image": "http://your-domain.com/images/image.jpg" },
        // add more open graph tags
    ]
})

我的猜测是包SeoCollection为你创建了集合,所以我只需要填充一些种子数据,一个插入我的应用程序的每个路径.凉!

哦,等等......自述文件说的不同:

您可以设置一些标准值.如果没有其他可用的话,将设置此项.

Meteor.startup(function() {
    if (Meteor.isClient) {
        return SEO.config({
            title: 'Manuel Schoebel - MVP Development',
            meta: {
                'description': 'Manuel Schoebel develops …