第十一节课问题收集 #23

caihuiji · 2019-06-03T11:55:23Z

课后作业：

mvvm demo 实现
vue 例子开发

evilrescuer · 2019-06-15T03:28:56Z

请问老师，下面这个mvvm demo的例子中：
Object.defineProperty的get方法，怎么直接返回model.text的值 (就是不用另外设置一个变量randomStr，而是直接返回被设置的新的值)；如果不写get方法，又会是undefined

<!DOCTYPE html>
<html>
    <div id="container">
        <!-- view 部分 (model.text表示取model.text的数据) -->
        <p id="p" data="{{model.text}}"><p>
    </div>

    <script>
        /** model 部分 **/
        let model = {
            text: '',
        }
        
        // 监听model.text数据变化(重点)
        Object.defineProperty(model, 'text', {
            set: (value) => {
                // model.text变化，新的值是value
                render() // 重新render p 元素 (把Model的数据同步到View显示出来)
            },
            // get: () => model.text    //(死循环)
            get: () => randomStr
        })

        // 模拟数据变化(每秒)
        let randomStr = ''
        setInterval(() => {
            // 设置一个随机数
            randomStr = Math.floor(Math.random() * 10000) + ''
            model.text = randomStr
        }, 1000)

        // DIY 一个render方法：模拟渲染p元素(根据p元素的属性data的模板语法)
        const render = () => {
            const p = document.querySelector('#container p');
            const expression = /\{\{([^{}]*)\}\}/.exec(p.getAttribute('data'))[1];  // model.text
            // 根据模板变量，修改p的文本
            p.innerText = eval(expression);
        }
    </script>
</html>

caihuiji · 2019-06-16T09:52:44Z

(function (model, name , value){
          
        Object.defineProperty(model, name, {
            set: (newValue) => {
                value = newValue;
              
                render() 
                return value;
            },
          
            get: () => {
              return value
            }
        })
      })(model,'text');

Object.defineProperty 改成这个部分，不然一直 mode.text 会进入一直 get 死循环

caihuiji added the 问题 label Jun 3, 2019

caihuiji changed the title ~~第十一节课答疑~~ 第十一节课问题收集 Jun 3, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

第十一节课问题收集 #23

第十一节课问题收集 #23

Uh oh!

Uh oh!

第十一节课问题收集 #23

第十一节课问题收集 #23

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!