Question

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

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

当页面加载时，放入标题文本框和textarea（文本编辑器所在的位置）文章变量中的值（在本例中标题为“我是标题”，“我是内容”在编辑器中）。
一旦我更改了这些文本框和textarea中的值，变量本身就应该更新为我写的内容。

不幸的是，我从未遇到过这种变量，所以我很乐意提供一些指导。

Answer 1

这是一个很好的选择使用淘汰赛。首先，我建议您阅读淘汰赛的文档：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>

Answer 2

如果您唯一的问题是“如何使用object”。您可以通过以下方式使用它：

var title = article.title;
var content = article.content;

Answer 3

试试这个：

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;
});

DEMO HERE

Answer 4

我更喜欢使用闭包来达到这个目的。您可以使用点语法使用下面评论的公共成员。您可能还想扩展和添加功能。

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);
}

jquery或javascript - 将文本编辑器中的文本添加到变量中

4 个答案: