Question

EDITED

管理以使大部分工作正常，但最终会出现问题。

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

所以我在模块中分离了两个类 - recipe和book，以及一个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'而后来使用相同的名称作为书的实例是令人困惑的。需要将book构造函数传递给数组以分配给它的_recipes属性。你可以做到

`this._recipes = recipes || [];

除了琐碎的东西，我不确定是什么让你感到困惑。您需要从HTML中获取数据，可能使用jQuery和

之类的语句

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

等等......

然后使用这些值

调用您的配方构造函数

最后将其作为book.add（newRecipe）

添加到您的图书中

Answer 2

你应该这样做：

<form id="newRecipe">
    <input id="name" type="text"/>
    <input id="rating" type="text"/>
    <input id="file" type="file"/>
    <select id="category" >
        <option>Cat 1</option>
        <option>Cat 2</option>
    </select>
    <input type="submit" value="Add Recipe" />
</form>

<script>
$("#newRecipe").submit(function(){

    var name = $(this).find("#name").val();
    var rating = $(this).find("#rating").val();
    .....
})
</script>

另一方面，我无法理解你创建对象的方式。您正在实现自动执行功能。

对我来说，正确的方式是：

function recipe(name, rating){
    this._name = name;
    this._rating = rating;

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

    //your methods here
}

ED app自动刷新/元素消失EDITED

2 个答案: