0

「タイトル」という名前のテキスト ボックスと、コンテンツを表すテキスト エディター ウィンドウを含む Web ページがあります。私はこのjavascript変数を持っています:

var article = {"title" : "I am a title", "content" : "I am the content"};

私は認めざるを得ず、これまで JavaScript でこの種の配列に遭遇したことがないので、助けが必要です。

HTMLページのコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
<script type="text/javascript">
        var article = {"title" : "I am a title", "content" : "I am the content"};
    </script>


</head>
<body>
    <form name="myForm" method="post">
        <label>Title:</label><br />
        <input id="myTitle"></input><br /><br />
        <label>Content:</label><br />
        <textarea id="myContent" name="myContent" rows="15" cols="80" style="width: 80%">
</textarea><br /><br /> 
        <input type="submit" value="save" />
    </form>
</body>
</html>

Web ページの機能に追加する必要があるのは次のとおりです。

  1. ページが読み込まれたら、タイトル テキスト ボックスとテキスト エリア (テキスト エディターがある場所) 内に article 変数の値を入力します (この場合、タイトルに「I am a title」、エディターに「I am the content」) ）。
  2. それらのテキストボックスとテキストエリア内の値を変更すると、変数自体が私が書いたものに更新されます。

残念ながら、私はこの種の変数に出くわしたことがないので、いくつかのガイダンスをいただければ幸いです.

4

4 に答える 4

2

これにはノックアウトを使用することをお勧めします。まず、ノックアウトのドキュメントを読むことをお勧めします: http://knockoutjs.com/documentation/introduction.html

オブジェクトのステータスを追跡するには、 を使用する必要がありますko.observable。次のコードをページの下部に配置します。

<script type="text/javascript">
        var article = {
           title: ko.observable("I am a title"),
           content: ko.observable("I am the content")
        };

    ko.applyBindings(article);
</script>

次のようにフォームを更新します。

<form name="myForm" method="post">
    <label>Title:</label><br />
    <input id="myTitle" data-bind="value: title"></input>
    <br /><br />
    <label>Content:</label><br />
    <textarea id="myContent" data-bind="value: content" name="myContent" rows="15" cols="80" style="width: 80%">
</textarea><br /><br />
    <input type="submit" value="save" />
</form>

ここにフィドルが働いています：http://jsfiddle.net/8gJAZ/

編集：

また、ノックアウト ライブラリへの参照を追加することを忘れないでください。

<script src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js' type='text/javascript'></script>
于 2012-12-27T15:51:58.997 に答える
1

あなたの唯一の問題は「使い方object」です。次の方法で使用できます。

var title = article.title;
var content = article.content;
于 2012-12-27T15:48:53.663 に答える
1

これを試して：

var article = {
    "title": "I am a title",
    "content": "I am the content"
};

$('#myTitle').val(article.title);
$('#myContent').val(article.content);

$('#target').click(function() {
    article.title = $('#myTitle').val();
    article.content = $('#myContent').val();
    alert(article.title + '\n' + article.content);
    return false;
});​

デモはこちら

于 2012-12-27T15:54:01.193 に答える
0

この目的のためにクロージャーを使用することを好みます。以下にドット構文でコメントされているパブリック メンバーを使用できます。また、機能を拡張および追加することもできます。

var Article = (function() {

    var title = "";
    var content = "";

    function setOrUpdateValues(t, c) {
        title = (t !== null) ? t : title;
        content = (c !== null) ? c : content;
    }

    function getValues() {
        return {
            title: title,
            content: content
        }
    }

    function setTitle(t) {
        title = t;
    }

    function setContent(c) {
        content = c;
    }

    function getTitle() {
        return title;
    }

    function getContent() {
        return content;
    }

    // public members
    return {
        title: title,
        content: content,
        getValues: getValues,
        setOrUpdateValues: setOrUpdateValues,
        updateTitle: setTitle,
        updateContent: setContent,
        getTitle: getTitle,
        getContent: getContent
    }
}());


// usage

Article.setOrUpdateValues("title", "content");

printValues();

Article.updateTitle("updated title");

printValues();

Article.setOrUpdateValues(null, "newContent");

printValues();

function printValues() {
    var values = Article.getValues();
    console.log("title: " + values.title + ", content: " + values.content);
}
于 2012-12-27T16:23:20.673 に答える