0

我有一个网页，其中包含一个名为“标题”的文本框和一个表示内容的文本编辑器窗口。我有这个 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>

我需要添加到网页功能的是：

  1. 当页面加载时，将标题文本框和文本区域（文本编辑器所在的位置）中的值放入文章变量中（在这种情况下，标题中的“我是标题”和编辑器中的“我是内容” ）。
  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 回答