Главная Обзор Помощь
Регистрация Вход
vuejs
/
vue
зеркало из https://github.com/vuejs/vue.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

update nested props example

Evan You 12 лет назад
Родитель
4126f41b08
Сommit
bf71151a1a
3 измененных файлов с 20 добавлено и 9 удалено
Единый вид Показать статистику Diff
  1. 1 1
      README.md
  2. 4 3
      README_Chinese.md
  3. 15 5
      examples/nested_props.html

+ 1 - 1
README.md
Просмотреть файл 

@@ -3,7 +3,7 @@
 
 
 
 - 5kb gzipped!
 
 - 5kb gzipped!
 
 - DOM based templates with precise and efficient manipulation
 
 - DOM based templates with precise and efficient manipulation
 
-- POJSO (Plain Old JavaScript Objects) Models FTW.
 
+- POJSO (Plain Old JavaScript Objects) Models FTW - even nested objects.
 
 - Auto dependency extraction for computed properties.
 
 - Auto dependency extraction for computed properties.
 
 - Auto event delegation on repeated items.
 
 - Auto event delegation on repeated items.
 
 - [Component](https://github.com/component/component) based, can be used as a CommonJS module but can also be used alone.
 
 - [Component](https://github.com/component/component) based, can be used as a CommonJS module but can also be used alone.

+ 4 - 3
README_Chinese.md
Просмотреть файл 

@@ -3,10 +3,11 @@
 
 
 
 - gzip后5kb大小
 
 - gzip后5kb大小
 
 - 基于DOM的动态模版，精确到TextNode的DOM操作
 
 - 基于DOM的动态模版，精确到TextNode的DOM操作
 
+- Model就是原生JS对象，支持任意深度的对象嵌套，不需要繁琐的get()或set()。
 
+- 操作Model时全自动更新DOM
 
 - 管道过滤函数 (filter piping)
 
 - 管道过滤函数 (filter piping)
 
-- 自定义绑定函数 (directive) 和过滤函数 (filter)
 
-- Model就是原生JS对象，不需要繁琐的get()或set()。操作对象自动更新DOM
 
-- 自动抓取需要计算的属性 (computed properties) 的依赖
 
+- 可自定义绑定函数 (directive) 和过滤函数 (filter)
 
+- 自动抓取计算属性 (computed properties) 的依赖
 
 - 在数组重复的元素上添加listener的时候自动代理事件 (event delegation)
 
 - 在数组重复的元素上添加listener的时候自动代理事件 (event delegation)
 
 - 基于Component，遵循CommonJS模块标准，也可独立使用
 
 - 基于Component，遵循CommonJS模块标准，也可独立使用
 
 - 移除时自动解绑所有listener
 
 - 移除时自动解绑所有listener

+ 15 - 5
examples/nested_props.html
Просмотреть файл 

@@ -6,32 +6,42 @@
 
         <script src="../dist/seed.js"></script>
 
         <script src="../dist/seed.js"></script>
 
     </head>
 
     </head>
 
     <body sd-controller="test">
 
     <body sd-controller="test">
 
-        <h1 sd-text="a.b.c"></h1>
 
-        <h3 sd-text="a.c"></h3>
 
+        <h1>a.b.c : {{a.b.c}}</h1>
 
+        <h2>a.c : {{a.c}}</h2>
 
+        <h3>Computed property that concats the two: {{d}}</h3>
 
         <button sd-on="click:one">one</button>
 
         <button sd-on="click:one">one</button>
 
         <button sd-on="click:two">two</button>
 
         <button sd-on="click:two">two</button>
 
         <button sd-on="click:three">three</button>
 
         <button sd-on="click:three">three</button>
 
         <script>
 
         <script>
 
             var Seed = require('seed')
 
             var Seed = require('seed')
 
             Seed.controller('test', function (scope) {
 
             Seed.controller('test', function (scope) {
 
+
 
+                // set the data any way you want.
 
                 scope.one = function () {
 
                 scope.one = function () {
 
                     scope.a = {
 
                     scope.a = {
 
                         c: 1,
 
                         c: 1,
 
                         b: {
 
                         b: {
 
-                            c: 1
 
+                            c: 'one'
 
                         }
 
                         }
 
                     }
 
                     }
 
                 }
 
                 }
 
+
 
                 scope.two = function () {
 
                 scope.two = function () {
 
                     scope.a.b = {
 
                     scope.a.b = {
 
-                        c: 2
 
+                        c: 'two'
 
                     }
 
                     }
 
                     scope.a.c = 2
 
                     scope.a.c = 2
 
                 }
 
                 }
 
+
 
                 scope.three = function () {
 
                 scope.three = function () {
 
-                    scope.a.b.c = 3
 
+                    scope.a.b.c = 'three'
 
                     scope.a.c = 3
 
                     scope.a.c = 3
 
                 }
 
                 }
 
+
 
+                // computed properties also works!!!!
 
+                scope.d = {get: function () {
 
+                    return (scope.a.b.c + scope.a.c) || ''
 
+                }}
 
             })
 
             })
 
             var app = Seed.bootstrap()
 
             var app = Seed.bootstrap()
 
         </script>
 
         </script>