

Monacaでメモ帳アプリを開発している者です。

メモ帳アプリのテンプレートを元に作っているのですが、テンプレートにはメモの編集機能がありませんでした。

そこで、以下のように編集機能を加えてみたのですが、編集画面に移ると元のメモ内容が表示されないという現象が起こっています。

細かく言いますと、メモ登録後、最初に編集ボタンを押した際には元のメモ内容が表示されないのですが、再度入力し直して上書き保存を押すと、次に編集する際には、入力し直した内容がきちんと表示される、という複雑な現象です。

おそらく、 `onShowLink` あたりの記述が足りていないように思うのですが、改善方法をご教授いただけましたら幸いです。

どうぞよろしくお願い致します。

_～～～index.html～～～_

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    
        <!-- TOP Page -->
        <div data-role="page" id="TopPage">
            <header data-role="header" data-position="fixed" data-theme="c">
                <h1>メモ帳</h1>
                <a href="#AddPage" data-icon="plus" class="ui-btn-right">メモを追加</a>
            </header>
            <section data-role="content">
                <ul id="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">       
                </ul>
            </section>
        </div>
    
        <!-- Add Memo Page -->
        <div data-role="page" id="AddPage">
            <header data-role="header" data-position="fixed" data-theme="c">
                <a data-role="button" data-rel="back" data-icon="back">戻る</a>
                <h1>新しいメモ</h1>
            </header>
            <section data-role="content">
                <label for="Memo"></label>
                <textarea id="Memo"></textarea>
                <a data-role="button" data-icon="check" id="SaveBtn">保存</a>
            </section>
        </div>
    
        <!-- Detail Page -->
        <div data-role="page" id="ShowPage">
            <header data-role="header" data-position="fixed" data-theme="c">
                <a data-role="button" data-rel="back" data-icon="back">戻る</a>
                <a href="#EditPage" data-theme="b" class="ui-btn-right" id="EditBtn">編集</a>
                <h1></h1>
            </header>
            <section data-role="content">
                <p></p>
            </section>
        </div>
    
        <!-- Edit Memo Page -->
        <div data-role="page" id="EditPage">
            <header data-role="header" data-position="fixed">
                <a data-role="button" data-rel="back" data-icon="back">戻る</a>
                <h1>メモを編集</h1>
            </header> 
            <section data-role="context">
                <input id="edit" type="text">
    
                <button onclick="saveEditedMemo()">上書き保存</button>
            </section>
        </div>
    
    <script src="components/loader.js"></script>
    <script src="js/memo.js"></script>
    <script src="js/app.js"></script>
    <script src="js/cssua.min.js"></script>
    </body>
    </html>
    
[/code]

_～～～app.js～～～_

[code]

    ///// Save memo and return to top page
    function onSaveBtn() {
        var text = $("#Memo").val();
        if (text != '') {
            // Save to local storage
            addMemo(text);
            // Clear form
            $("#Memo").val("");
            // Initialize top page
            initTopPage();
        }
        $.mobile.changePage("#TopPage", { reverse: true });
    }
    
    ///// Initialize top page
    function initTopPage() {
        $("#TopListView").empty();
    
        var list = getMemoList();
        for (var i in list) {
            var memo = list[i];
            var d = new Date(memo.time);
            var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
    
            $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
            $li.data("id", memo.id);
            $li.find("h3").text(date);
            $li.find("p").text(memo.text);
            $("#TopListView").prepend($li);
        }
        if (list.length == 0) {
            $li = $("<li>メモがありません</li>");
            $("#TopListView").prepend($li);
        }
        $("#TopListView").listview("refresh");  // Call refresh after manipulating list
    }
    
    ///// Move to detail page
    function onShowLink() {
        var $li = $(this).parent();
        selectedMemoId = $(this).parents('li').data("id");    
        var memoTitle = $li.find("h3").text();
        var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");
    
        $("#ShowPage h1").text(memoTitle);
        $("#ShowPage p").html(memoHtml);
        $.mobile.changePage("#ShowPage");
    }
    
    ///// Delete memo
    function onDeleteLink() {
        if (!confirm("このメモを削除しますか？")) {
          return;
        }
        var $li = $(this).parent();
        var id = $li.data("id");
        deleteMemo(id);
    
        initTopPage();
    
        // Return to top
        $.mobile.changePage("#TopPage", { reverse: true });
    }
    
    ///// Called when app launch
    function onReady() {
        initTopPage();
        $("#SaveBtn").click(onSaveBtn);
        $("#TopListView").on("click", "a.show", onShowLink);
        $("#TopListView").on("click", "a.delete", onDeleteLink);
    }
    
    ///// Edit memo
    function saveEditedMemo() {
    
        var editedText = $("#EditPage input#edit").val();
    
        if (editedText != '') {
    
            deleteMemo(selectedMemoId);
    
            addMemo(editedText);
            // Clear form
            $("#Memo").val("");
            // Initialize top page
            initTopPage();
        }
        $.mobile.changePage("#TopPage", { reverse: true });
    }
    
    $(onReady); // on DOMContentLoaded
    
[/code]


CC BY-SA 3.0
2015-02-25T22:03:19.923
7098
2015-07-27T03:10:59.213
2015-02-26T23:28:59.487
3516
8373
question
javascript monaca html
自作メモ帳アプリの編集保存機能で、初回に内容が表示されない


`onShowLink()`を下記のように変更したら表示されました。

ただ、 **ShowPage** を表示するときに **EditPage**
の値も設定しておくというのは何だか気持ちが悪いので、別の`function`を用意した方が良いのかなと思いました。

[code]

    ///// Move to detail page
    function onShowLink() {
        var $li = $(this).parent();
        selectedMemoId = $(this).parents('li').data("id");    
        var memoTitle = $li.find("h3").text();
    
        // 変更前
        // var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");
    
        // 変更後
        var memoContent = $li.find("p").html();
        var memoHtml = memoContent.replace(/\n/g, "<br>");
    
        $("#ShowPage h1").text(memoTitle);
        $("#ShowPage p").html(memoHtml);
    
        // 下記1文を追加
        $("#EditPage input#edit").val(memoContent);
    
        $.mobile.changePage("#ShowPage");
    }
    
[/code]

> 次に編集する際には、入力し直した内容がきちんと表示される

こちらについてはおそらくですが編集時のキャッシュが残っているのではないかと思います。


CC BY-SA 3.0
2015-02-26T06:13:51.563
7121
2015-02-26T06:13:51.563
3516
7098
answer