在 DOM 中镜像 JSON 对象更改 jQuery（或可能与其他框架）

Question

我需要构建一个网络应用程序，理想情况下应该有一个包含多个属性的 json 对象，并在这些属性发生变化时更新 DOM（html 元素）。

示例：

<ul data-id="elements">
<li data-id="01">Element 01</li>
<li data-id="02">Element 02</li>
<li data-id="03">Element 03</li>
<li data-id="04">Element 04</li>
</ul>

这个 UL 会有一个镜像 JSON 对象来保存所有的值，当我在对象上做这样的事情时：

elements.id('01') = "Change Value";

它会根据更改的内容自动（或通过方法调用）更新 UL。在这种情况下，它会导致：

<ul data-id="elements">
<li data-id="01">Change Value</li>
<li data-id="02">Element 02</li>
<li data-id="03">Element 03</li>
<li data-id="04">Element 04</li>
</ul>

在完美的情况下，我会在 Jquery 中以某种方式做到这一点，但我不知道从哪里开始（我的意思是，如果不为它编写一个全新的库也是可能的）。有任何想法或可能已经构建的库吗？

我知道我可以使用 jquery 函数更改一个元素，但我的想法是让对象自动更新到视图中。

我尝试研究 Angular 和 React，但两者似乎与我已经使用的东西（纯 javascript 和 jquery）相去甚远。还没想好用什么，大家可以指点一下吗？

Answer 1

您还用 reactjs 标记了您的问题。因此我建议 react 这样做。

一种常见的方法是创建两个组件，List 和 ListItem。 List 组件应处理状态、ajax 调用以及将列表内容作为 props 传递给子组件 ListItem。

这个小 fiddle 完全可以满足您的需求。

var List = React.createClass({
    loadFromServer: function() {
        $.ajax({
            url: this.props.url,
            data: data,
            type: 'POST',
            success: function(data) {
                console.log(data);
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function() {
        return {data: []};
    },
    componentDidMount: function() {
        this.loadFromServer();
    },
    handleClick: function() {
        var data = this.state.data;
        data[4].text = 'Change Value';

        this.setState({data: data});
    },
    render: function() {
        var listItems = this.state.data.map(function(item) {
            return <ListItem text={item.text} />;
        });

        return (
            <div>
                <ul>
                    {listItems}
                </ul>
                <button onClick={this.handleClick}>Change first list item</button>
            </div>
        );
    }
});

var ListItem = React.createClass({
    render: function() {
        return <li>{this.props.text}</li>;
    }
});

React.render(<List url="/echo/json/" />, document.getElementById('container'));

在 this tutorial 中，您将学习如何构建一个简单的 React 应用程序。

在 DOM 中镜像 JSON 对象更改 jQuery（或可能与其他框架）

Mirror JSON object changes in the DOM in jQuery (or possibly with other frameworks)

javascript

jquery

json

angularjs

reactjs