javascript - JS 应用程序自动刷新/元素消失编辑

Question

已编辑

设法让大部分工作正常运行，但最后遇到了问题。

我有一个 html 文件，其中包含一些输入字段和 div 元素，我必须在创建该文件时附加一个配方。

因此，我在模块中分离了两个类 - 食谱和书籍，以及一个 app.js 文件，然后应将两者合并到一个工作应用程序中。

我现在遇到的问题是，每当我单击“添加”按钮时，菜谱仅显示一毫秒，然后就消失了..我不知道为什么。难道是因为我的类是自调用的？我尝试以标准方式执行此操作，但由于某种原因运行 x instanceof y 总是返回 false。我上传了一个短视频，直观地展示了该问题。

VIDEO

此外，当我尝试将对象 r 插入书本后调用 book.getRecipes() 时，我得到 [object Object] 而不是 r 中包含的值。

如果需要，可以提供更多信息。

谢谢

var Recipe = (function() {

  var nextId = 1;

  var constr = function(name, rating, image, category) {

    this._id = nextId++;
    this._name = name || '';
    this._rating = rating || '';
    this._image = image || '';
    this._category = category || '';

    this.setName = function(name) {
      this._name = name;
    };

    this.setRating = function(rating) {
      this._rating = rating;
    };

    this.setImage = function(image) {
      this._image = image;
    };

    this.setCategory = function(category) {
      this._category = category;
    };
  };
  return constr;
})();

还有

var Book = (function() {

  var construct = function(recipes) {

    this._recipes = recipes || [];

    this.addRecipe = function(recipe) {
      this._recipes.push(recipe);
    };

    this.removeRecipe = function(id) {
      this._recipes.splice(id, 1);
    };

    this.getRecipes = function() {
      return this._recipes;
    };
  };
  return construct;
})();

app.js 已全部初始化(loadData 函数是预先编写的(不是我写的!)):

var app = app || {};

(function(recipeBook) {
var book = new Book();
var r = new Recipe();



  $('#add_book').click(function () {

    var $name = $('.uk-form').find('#name').val();
    var $rating = $('.uk-form').find('#rating').val();
    var $image = $('.uk-form').find('#image').val();
    var $category = $('.uk-form').find('#category :selected').val();
    r._name = $name;
    r._rating = $rating;
    r._image = $image;
    r._category = $category;
    book.addRecipe(r);
                        //trying add a recipe into the book

    loadData();

  });

  $("#clear_book").click(function() {
    (".uk-form").reset();
    console.log('clears recipe form');


});


$(document).on('click','.remove',function(ev){
    // still not implemented
    console.log('remove target recipe by Id');
    loadData();
});

loadData();

function loadData() {
    var meat = book.getRecipes().filter(function(r) {
        return r._category === "meat";
    });

    var vegan = book.getRecipes().filter(function(r) {
        return r._category === "vegan";
    });

    var dessert = book.getRecipes().filter(function(r) {
        return r._category === "dessert";
    });

    var source   = $("#recipe-trmplate").html();
    var template = Handlebars.compile(source);

    var contextMeat = {meat:meat};
    var contextvegan = {meat:vegan};
    var contextdessert = {meat:dessert};
    var html    = template(contextMeat);
    var html2    = template(contextvegan);
    var html3    = template(contextdessert);

    $('#meat_recipes').html(html);
    $('#vegan_recipes').html(html2);
    $('#dessert_recipes').html(html3);
}

}(app));

app.js 大部分是由另一个人预先编写的，我在其中的工作是添加 DOM 操作(添加/删除书籍等)

Answer 1

您的点击处理程序中似乎有一个额外的 } 。可能是一个错字。令人困惑的是，您将书 ctor 命名为“书”，然后又对书的实例使用相同的名称。需要向 book 构造函数传递一个数组以分配给其 _recipes 属性。你可以这样做

`this._recipes = recipes || [];

撇开这些繁琐的事情不谈，我不确定是什么让你感到困惑。您需要从 HTML 中获取数据，可能使用 jQuery 和诸如

之类的语句

`var name = $('input selector string').val()`
 or possibly 
`var rating = $('div selector string').html()'

等等...

然后使用这些值调用您的配方构造函数

最后将其添加到您的书中作为 book.add( newRecipe )