jQuery在JSON对象更改上更新DOM

Question

基本上我有以下JSON对象：

let myObject = [
    { title: 'exampleTitle1', content: 'exampleContent1'}
    { title: 'exampleTitle2', content: 'exampleContent2'}
]

此外，在我的代码中，假设我将标题附加到无序列表中，如下所示：

myObject.forEach(function(container){
    $('ul').append('<li>' + container.content + '</li>');
})

到目前为止，一切都很好，但是在我的代码后面，我想要做类似的事情：

 myObject[0].content = "New Content"

并获取DOM以使用更改后的对象进行更新。 我应该如何不使用Vue或React之类的东西呢？ 我有办法听对象变化吗？

Answer 1

使用Object.defineProperty重新定义content属性，在set函数中，触发“ Change.content.myObj”事件，然后可以在事件处理程序中刷新UI。 霍尔普这很有帮助。

     <script type="text/javascript">
     $(function () {   
        myObject.forEach(function (container) {
            var li = $('ul').append('<li id="' + container.title + '">' + container.content + '</li>');
        })
        $(document).on("Change.content.myObj", function (e, item) {
            $("#" + item.title).text(item.content);
        })
     });

     let myObject = [
        { title: 'exampleTitle1', content: 'exampleContent1'},
        { title: 'exampleTitle2', content: 'exampleContent2'}
     ]

     myObject.forEach(item => {
         item._content = item.content;
         Object.defineProperty(item,'content', {
            enumerable: true,
            configurable: true,
            get: function() {
                    return item._content;
                },
             set: function (value) {
                 item._content = value;
                 $(document).trigger("Change.content.myObj", item);
            }
        });
     });

     function changeContent() {
         myObject.forEach(item => item.content += "_1");
     }
</script>
<button onclick="changeContent();">changeContent</button>
<ul></ul>

Answer 2

我找到了一个很好的教程here，该教程是关于如何执行此操作的。首先编写以下代码：

myObject.forEach(function(container){
    $('ul').append('<li>' + container.content + '</li>');
})

进入功能：

function displayItems() {
    myObject.forEach(function(container){
        $('ul').append('<li>' + container.content + '</li>');
    })
}

然后从新文件添加脚本：

<script src="change.js"></script>

然后在change.js中添加以下代码：

'use strict';

module.exports = (object, onChange) => { 
    const handler = {
    get(target, property, receiver) {
        try {
            return new Proxy(target[property], handler);
    } catch (err) {
                return Reflect.get(target, property, receiver);
    }
    },
        defineProperty(target, property, descriptor) {
        onChange();
    return Reflect.defineProperty(target, property, descriptor);
    },
    deleteProperty(target, property) {
    onChange();
    return Reflect.deleteProperty(target, property);
    }
    };
return new Proxy(object, handler);
};

然后将您的对象附加到此：

var myObjectRef = onChange(myObject, displayItems);

重要

要使更改检测正常工作，您现在必须修改myObjectRef而不是myObject。确保执行此操作！

现在您的代码应该都可以正常工作了！希望这会有所帮助！