JS應用自動刷新/元素消失EDITED

Question

EDITED

設法得到大部分的工作，但有接近尾聲的一個問題。

我有一個帶有幾個輸入字段和div元素的html文件，當它創建時我必須添加一個配方。

所以我有兩個模塊分開 - 食譜和書籍，和一個app.js文件，然後應該將兩者結合到一個工作的應用程序。

現在的問題是，只要我點擊添加按鈕，配方只顯示一毫秒，然後消失..我不知道爲什麼。難道是因爲我的課程是自我調動的？我試圖以非常規的方式運行，並且由於某種原因，運行x instanceof y總是返回false。 我上傳了一個可視化問題的簡短視頻。

VIDEO

而且當我打電話book.getRecipes（）後，我試圖把裏面的書對象R I得到[對象對象]，而不是被包含在'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

它看起來像你在你的點擊處理程序中有一個額外的}。可能是一個錯字。令人困惑的是，您將書名命名爲「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 
}