除非访问了数据属性，否则Blaze.getData(el）将返回null

Blaze.getData(el) returns null unless data property is accessed

本文关键字：el null 返回 getData Blaze 访问 数据属性 否则      更新时间：2023-09-26

我正在尝试在Meteor中列出可重新订购的项目。我的项目具有info.order属性，我会在单击事件时更改该属性。为什么在我注释掉// ! ...下面的行之前，下面的示例仍然有效？

如果我注释掉那一行，当事件处理程序中引用data._id时，我会得到错误Cannot read property '_id' of null。

这是最小Meteor javascript:

Widget = new Mongo.Collection('widget');
if (Meteor.isClient) {
    function moveUp (mongo_id) {
        var clicked = Widget.findOne({_id: mongo_id});
        var above = Widget.findOne({'info.order': clicked.info.order - 1});
        if (above) {
            Widget.update({_id: clicked._id}, {$inc: {"info.order": -1}});
            Widget.update({_id: above._id}, {$inc: {"info.order": 1}});
        }
    }
    Template.widget.helpers({
        // Get list of widget to display and sort by latest first.
        widget: function(data){
            return  Widget.find({}, {sort: {'info.order': 1}});
        },
        display: function(mongo_id, info) {
            var html = '<div>';
            html += '<div>' + info.label + '</div>';
            html += '<div><a href="#" class="btn btn-default js-moveup">Up</a></div>';
            // ! IF NEXT LINE IS COMMENTED-OUT data == null IN EVENT HANDLER
            html += '<div>' + info.order + '</div>';
            html += '</div>';
        return html;
        }
    });
    Template.widget.events({
    'click .js-moveup': function(e, tpl){
            e.preventDefault();
            var data = Blaze.getData(e.currentTarget);
            moveUp(data._id);
    }
    });
} // end is MeteorClient

使用此模板：

<head></head>
<body>
  {{> widget}}
</body>
<template name="widget">
  <div class="container">
    <h1>Widgets</h1>
    {{#each widget}}
    {{{display _id info}}}
    {{/each}}
  </div>
</template>

这个种子数据：

Meteor.startup(function () {
    if (Widget.find().count() === 0) {
        [{info :{label: "first", order: 1}},
         {info: {label: "second", order: 2}},
         {info: {label: "third", order: 3}}
        ].forEach(function(w){
    Widget.insert(w);
    });
}
});

我知道发生了什么…

Meteor必须将display()的输出与其以前的值进行比较，并且只有在DOM发生更改（或类似情况）时才评估更新DOM。如果我不打印info.order，每个小部件的HTML都不会改变。

我通过用new Date()替换info.order来添加不同的内容来测试这一点，这些内容没有引用模型，当然，小部件也更符合预期。

所以，我要告诉大家的是，如果你从显示器返回原始HTML，Meteor会尝试写东西，但并不总是正确的。

相关文章：