Question

我正在使用meteor来显示列表。

所以我决定通过添加箭头在列表中向上移动项目来添加在页面周围的列表中移动项目的功能。这是第一次单击箭头时有效但进一步尝试失败，因为＆＃34; this＆＃34;现在是不确定的。所以点击我做的向上箭头：

Template.experiment.events({

    'click .js-moveup': function(e, tpl){
        e.preventDefault();

        // Movethis item up one.
        Meteor.call("moveUp", this._id, this.info.url_id, this.info.order); 
        return false;
    },
});

模板如下所示：

   <template name="experiment">
    <div class="container">
        <form class="update">
            {{#each experiment}}
                <!-- triple makes  does not escape html -->
                {{{display info}}}
            {{/each}}
        </form>
    </div>
    </template>

（显示信息为项目生成所需的HTML）

所有的举动都是交换单击的单词和上面的顺序字段。

首先点击订单按预期更改并重新绘制这两个项目（并在其中包含正确的数据）但是进一步点击＆＃34;此＆＃34;在事件处理程序是未定义？

这是我一直在努力的一个更大的部分，但我现在已经将其破解为最简单的形式，以确保没有其他任何干扰，我包括这个here

任何建议都非常受欢迎，因为我现在完全被困住了。

也许我的问题是Meteor如何处理更新。这是我的路由器位： -

Router.route('/experiment/:url_id', {
    template: 'experiment',
    subscriptions: function() {
        console.log("template render experiment")
        return [Meteor.subscribe('experiments',
                            {"meta.url_id":this.params.url_id}),
                Meteor.subscribe('experiment', this.params.url_id)];
    },
    action: function (){
        this.render('experiment');
    },
    data: function (){
        return {bob:"bobby"};
    }
});

所以在初始绘图时数据是正确的，这包含了我需要的数据（来自db＆＃34;实验＆＃34;）。重新绘制数据后，{bob：＆＃34; bobby＆＃34;}（我把它放进去看看发生了什么）如果我错过了数据，它会被设置为undefined。因此在重绘时导入/覆盖了错误的数据。

更新：所以我的问题是为什么Meteor在重绘后丢失了上下文。如果我使用HTML （注释掉了）它工作正常，但使用功能显示（生成相同的HTML代码）却没有。

我已将此缩减为两个文件： - experiment.html 实验项目移动

<body>
  {{> experiment}}
</body>
<template name="experiment">
  <div class="container">
    <h1>Experiment...</h1>
     {{#each experiment}} 
        {{log}}
<!--          <div class="col-md-8 col-sm-8 col-sx-10">{{info.label}}</div>
          <div class= "col-md-2 col-md-offset-2 col-sm-2 col-sm-offset-2 col-sx-2">
          <a href="#" class="btn btn-default js-moveup" data-id="{{_id}}"  name="{{info.label}}">
          <span class="glyphicon glyphicon-arrow-up" data-id="{{_id}}" aria-hidden="true" name="{{info.label}}"></span></a>
          </div>

          <div class="col-sm-10 col-sm-offset-2 col-sx-offset-2 col-sx-10">          
          <textarea class="js-text-input" rows="4" cols="50" name="{{info.label}}" type="textarea">{{info.value}}</textarea>
          </div> -->

          {{{display _id info}}}   <!-- triple makes  does not escape html -->
      {{/each}}
  </div>

</template>

和experiment.js： -

//experiment.js
Experiment = new Mongo.Collection('experiment');
if (Meteor.isClient) {
  function moveUpNew (mongo_id) {
    var clicked = Experiment.findOne({_id: mongo_id});
    var above = Experiment.findOne({"info.url_id": clicked.info.url_id, "info.is_current": 1, "info.order": clicked.info.order-1});
    if (above) { // One clicked could be the top one. hence there may not be one above
       Experiment.update({_id: clicked._id}, {$inc: {"info.order": -1}}); //move up one
       Experiment.update({_id: above._id},   {$inc: {"info.order":  1}}); // move down one
    }
  }; // end moveUpNew



  Template.experiment.helpers({

    // Get list of experiment to display and sort by latest first.
    experiment: function(data){
        return  Experiment.find({},{sort :{"info.order": 1, "info.created": 1}});
    },
    log: function () {
      console.log("LOG: ", this);
    },
    // Main display of the docs
    display: function(mongo_id, info) {
        console.log("INSIDE display ", mongo_id);
        console.log(info.label+" "+info.order);
        var html = '<div class="well row">';
          html += '<div class="col-md-8 col-sm-8 col-sx-10">'+info.label+'</div>';
          html += '<div class= "col-md-2 col-md-offset-2 col-sm-2 col-sm-offset-2 col-sx-2">';
            html += '<a href="#" class="btn btn-default js-moveup" data-id="'+mongo_id+'" name="'+info.label+'">';
            html += '<span class="glyphicon glyphicon-arrow-up" data-id="'+mongo_id+'" aria-hidden="true" name="'+info.label+'"></span></a>';
          html += '</div>';


          html += '<div class="col-sm-10 col-sm-offset-2 col-sx-offset-2 col-sx-10">';
          // simple text input area for text
          if ( info.type == "text" ) {
              html += '<textarea class="js-text-input" rows="4" cols="50" name="'+info.label+'"'+' type="textarea">'+info.value+'</textarea>';
          }
          html += "</div>"; // end text input
          html += "</div>"; // end well row
        return html;
    }


  });

  Template.experiment.events({

  'click .js-moveup': function(e, tpl){
     e.preventDefault(); 
    var data = Blaze.getData(e.currentTarget);
    console.log("data is");
    console.log(data);
 //   Meteor.call("moveUp", this._id, this.info.url_id, this.info.order);   // Move this item up one.
     moveUpNew(data._id);
  }

  });
} // end is MeteorClient

Answer 1

事件处理程序中的

this有点棘手。相反，您应该使用适当的Blaze API。

您正在寻找的是：

var data = Blaze.getData(e.currentTarget());
Meteor.call("moveUp", data._id, data.info.url_id, data.info.order);

此外，您可以删除不需要的return false。

Answer 2

您可以将data- *属性添加到您的信息中并使用它。

Template.experiment.events({
    'click .js-moveup': function(e, tpl){
        e.preventDefault();
        $item = $(e.currentTarget)

        // Movethis item up one.
        Meteor.call("moveUp", $item.data('id'), $item.data('url_id'), $item.data('order')); 
    },
});

虽然你的标签有这样的东西：

<a class="js-moveup" data-id="{{_id}}" data-url_id="{{info.url_id}}" data-order="{{info.order}}">up_arrow</a>

流星重绘设置＆＃34;这个＆＃34;设置为未定义

2 个答案: