Question

我正在阅读“Meteor in Action”的第一个例子book（myfridge app）。在我们为产品添加拖放功能的最后一步，似乎我的应用程序无法识别jquery。我选择了最新版本，因为这本书有点过时了。

我已根据/client/main.html文件

中的要求添加了jquery CDN

<head>
  <title>myfridge</title>
  <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

在我的/client/main.js中，我添加了必要的声明，以便fridge和productList可放置，productListItem可拖动。

Template.fridge.onRendered( function () {
    var templateInstance = this;

    templateInstance.$('#fridge').droppable({
        drop: function(evt, ui) {
            var query = { _id: ui.draggable.data('id') };
            var changes = { $set: { place: 'fridge' } };
            Products.update(query, changes);
        }
    });
});


Template.productList.onRendered( function() {
    var templateInstance = this;

    templateInstance.$('#supermarket').droppable({
        drop: function(evt, ui) {
            var query = { _id: ui.draggable.data('id') };
            var changes = { $set: { place: 'supermarket'} };
            Products.update(query, changes);
        }
    });
});

Template.productListItem.onRendered( function() {
    var templateInstance = this;

    templateInstance.$('.draggable').draggable({
        cursor: 'move',
        helper: 'clone'
    });
});

我已经检查了其他类似问题的帖子，但似乎这些提示对我不起作用。

编辑：控制台中的错误消息为

Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).droppable is not a function
    at .<anonymous> (main.js:9)
    at template.js:119
    at Function.Template._withTemplateInstanceFunc (template.js:465)
    at fireCallbacks (template.js:115)
    at .<anonymous> (template.js:208)
    at view.js:107
    at Object.Blaze._withCurrentView (view.js:538)
    at view.js:106
    at Object.Tracker._runFlush (tracker.js:511)
    at onGlobalMessage (setimmediate.js:102)
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).droppable is not a function
    at .<anonymous> (main.js:22)
    at template.js:119
    at Function.Template._withTemplateInstanceFunc (template.js:465)
    at fireCallbacks (template.js:115)
    at .<anonymous> (template.js:208)
    at view.js:107
    at Object.Blaze._withCurrentView (view.js:538)
    at view.js:106
    at Object.Tracker._runFlush (tracker.js:511)
    at onGlobalMessage (setimmediate.js:102)
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).draggable is not a function
    at .<anonymous> (main.js:34)
    at template.js:119
    at Function.Template._withTemplateInstanceFunc (template.js:465)
    at fireCallbacks (template.js:115)
    at .<anonymous> (template.js:208)
    at view.js:107
    at Object.Blaze._withCurrentView (view.js:538)
    at view.js:106
    at Object.Tracker._runFlush (tracker.js:511)
    at onGlobalMessage (setimmediate.js:102)
debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 TypeError: templateInstance.$(...).draggable is not a function
    at .<anonymous> (main.js:34)
    at template.js:119
    at Function.Template._withTemplateInstanceFunc (template.js:465)
    at fireCallbacks (template.js:115)
    at .<anonymous> (template.js:208)
    at view.js:107
    at Object.Blaze._withCurrentView (view.js:538)
    at view.js:106
    at Object.Tracker._runFlush (tracker.js:511)
    at onGlobalMessage (setimmediate.js:102)

Answer 1

您的错误消息为templateInstance.$(...).droppable is not a function，这意味着您的client/main.js无权访问jQuery UI可访问的.droppable()方法。

如果您只需要jQuery UI可拖动和可放置功能，则可以使用meteor add drewproud:jquery-ui-droppable安装drewproud:jquery-ui-droppable。

Answer 2

Jquery可用作流星包

包括这样：

meteor add jquery

Jquery没有使用meteorjs

2 个答案: