Question

我正在从Udacity的一门课程中进行练习，他们给了我们html及其javascript功能。该网页包含一个表单，您可以在其中编写一些内容，然后提交该内容，然后将其添加到页面上的蓝色方框中。这样做的目的是向我们展示mvo设计模式是如何工作的，因此将js文件划分为模型，视图和连接前两者的章鱼。只是为了玩转，我想添加一个“删除”按钮，以删除页面中的最后一个块。我有点想添加一个新块的函数，但是使用.pop（）而不是.push（）来操纵页面的本地存储。我认为该功能是正确的，但是我不知道如何“调用”该功能。我试图将事件监听器添加到按钮。我也尝试将jquery中的.submit（）与event.preventDefault（）;一起使用。将remove函数作为.submit（）的参数。我认为最接近的选择是使用标签引用.js，然后在按钮的onclick属性中调用该函数，但是它不起作用（该函数是.js内部对象的方法，因此我尝试调用它像这样的<button onclick = "javascript:octopus.remove()">remove!</button>）。还尝试使用onclick但在javascript document.getElementById("button").onclick = function(){};上使用，但是什么也没有。有什么帮助吗？这是js

$(function(){

    var model = {
        init: function() {
            if (!localStorage.notes) {
                localStorage.notes = JSON.stringify([]);
            }
        },
        add: function(obj) {
            var data = JSON.parse(localStorage.notes);
            data.push(obj);
            localStorage.notes = JSON.stringify(data);
        },
        getAllNotes: function() {
            return JSON.parse(localStorage.notes);
        },
        //here I tried everything but nothing seems to work
        remove: function() {
            document.getElementById("button").onclick = 
                function(){
                    var data = JSON.parse(localStorage.notes);
                    data.push(obj);
                    localStorage.notes = JSON.stringify(data);
            };
        }

        
    };


    var octopus = {
        addNewNote: function(noteStr) {
            model.add({
                content: noteStr
            });
            view.render();
        },

        getNotes: function() {
            return model.getAllNotes().reverse();
        },

        init: function() {
            model.init();
            view.init();
        },
        
        removeNote: function(){
            model.remove();
            view.render();
        }
    };


    var view = {
        init: function() {
            this.noteList = $('#notes');
            var newNoteForm = $('#new-note-form');
            var newNoteContent = $('#new-note-content');
            newNoteForm.submit(function(e){
                octopus.addNewNote(newNoteContent.val());
                newNoteContent.val('');
                e.preventDefault();
            });

            view.render();

        },
        render: function(){
            var htmlStr = '';
            octopus.getNotes().forEach(function(note){
                htmlStr += '<li class="note">'+
                        note.content + 
                    '</li>';
            });
            this.noteList.html( htmlStr );
        },


    };

    octopus.init();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Udacity Retain</title>
    <link rel="stylesheet" href="css/retain.css">
</head>
<body>    
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/retain.js"></script>
    
    <form id="new-note-form" class="new-note-form">
        <input id="new-note-content" class="new-note-content">
    </form>
    <button id = "button">remove!</button>
    
    <ul id="notes" class="notes"></ul>



</body>
</html>

Answer 1

您快到了。.我已经更新了您的代码，可以正常工作了，见下文。

首先，您需要使用model.remove()使pop()实际上删除一个项目，然后保存更新的数据。

第二，您需要将click事件关联到“删除”按钮。在您将表单提交挂钩之后，我已经在view.init()中添加了此内容。

$(function(){

    var model = {
        init: function() {
            if (!localStorage.notes) {
                localStorage.notes = JSON.stringify([]);
            }
        },
        add: function(obj) {
            var data = JSON.parse(localStorage.notes);
            data.push(obj);
            localStorage.notes = JSON.stringify(data);
        },
        getAllNotes: function() {
            return JSON.parse(localStorage.notes);
        },
        // Updated method below
        remove: function() {
          var data = JSON.parse(localStorage.notes);
          data.pop();
          localStorage.notes = JSON.stringify(data);
        }        
    };


    var octopus = {
        addNewNote: function(noteStr) {
            model.add({
                content: noteStr
            });
            view.render();
        },

        getNotes: function() {
            return model.getAllNotes().reverse();
        },

        init: function() {
            model.init();
            view.init();
        },
        
        removeNote: function(){
            model.remove();
            view.render();
        }
    };


    var view = {
        init: function() {
            this.noteList = $('#notes');
            var newNoteForm = $('#new-note-form');
            var newNoteContent = $('#new-note-content');
            var removeBtn = $('#button');
            
            newNoteForm.submit(function(e){
                octopus.addNewNote(newNoteContent.val());
                newNoteContent.val('');
                e.preventDefault();
            });

            // Added click event on the remove button
            removeBtn.on('click', function() {
                octopus.removeNote();
            });

            view.render();

        },
        render: function(){
            var htmlStr = '';
            octopus.getNotes().forEach(function(note){
                htmlStr += '<li class="note">'+
                        note.content + 
                    '</li>';
            });
            this.noteList.html( htmlStr );
        },


    };

    octopus.init();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Udacity Retain</title>
    <link rel="stylesheet" href="css/retain.css">
</head>
<body>    
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/retain.js"></script>
    
    <form id="new-note-form" class="new-note-form">
        <input id="new-note-content" class="new-note-content">
    </form>
    <button id = "button">remove!</button>
    
    <ul id="notes" class="notes"></ul>



</body>
</html>

在html按钮中引用外部js文件的位置

1 个答案: